English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

manuel de référence CSS

règles CSS @

大全 des attributs CSS

CSS3 animation-play-Méthode d'utilisation et exemples de l'attribut state

CSS3 animation-play-L'attribut state indique si l'animation doit être jouée ou arrêtée.

Le tableau suivant résume l'utilisation de cet attribut et l'historique des versions.

Valeur par défaut :running
Appliqué à :Tous les éléments ::before et ::after Élément factice
Héritage :Aucun
Réalisation animée :Non.请参见 Veuillez voir
Attributs d'animation CSS3Version :
Nouvelle fonction de JavaScript    
object    object.style.animationPlayState="paused"

animation-play-Syntaxe d'utilisation de state

La syntaxe de cet attribut est la suivante :

animation-play-state: paused | running | initial | inherit

Les exemples suivants montrent comment utiliser l'animation-play-attribut state.

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    -webkit-animation-play-state: paused;
    
    animation-name: moveit;
    animation-duration: 2s;
    animation-play-state: paused;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
Testez pour voir‹/›

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cet attribut.

ValeurDescription
pausedSpécifie que l'animation est en pause.
runningSpécifie que l'animation est en cours d'exécution. C'est la valeur par défaut.
initialRéinitialisez cette propriété à sa valeur par défaut.
inheritSi spécifié, l'élément lié utilise l'animation de son élément parent-play-valeur calculée de l'attribut state.

Attention :animation-play-L'attribut stateCSS peut être utilisé avec JavaScript pour arrêter l'animation au milieu d'une boucle.

Compatibilité du navigateur

animation-play-Compatibilité du navigateur pour l'attribut state, tous les navigateurs populaires prennent en charge cette propriété.

  • Firefox 5+ -moz-,15 +

  • Google Chrome 4+ -webkit-

  • Internet Explorer 10+

  • Apple Safari 4+ -webkit-

  • Opera 12+ -o-,15+ -webkit-

Lisez la suite

Veuillez consulter les tutoriels suivants :CSS3Animation

Attributs et règles associés :animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state@keyframes