Accueil    CSS    Propriété animation-play-state
 



style css animation-play-state  Style CSS animation-play-state

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété css animation-play-state permet de mettre en pause et de reprendre l'animation. Il faut pour l'utiliser sur des évènements spécifiques modifier la propriété css en javascript :


document.getElementById("IdElement").style.animationPlayState = "paused"
document.getElementById("IdElement").style.WebkitAnimationPlayState = "paused"
document.getElementById("IdElement").style.MozAnimationPlayState = "paused"
document.getElementById("IdElement").style.OAnimationPlayState = "paused"



Actuellement chaque navigateur se base sur sa propre version de la propriété animate, ce qui fait beaucoup de duplication de code css :
    - Chrome et safari utilisent les propriétés "-webkit-animation-play-state" et
      "@-webkit-keyframes"
    - Firefox utilise les propriétés "-moz-animation-play-state" et "@-moz-keyframes"
    - Opera utilise les propriétés "-o-animation-play-state" et "@-o-keyframes"
    - Internet Explorer n'implémente pas encore les animations css



Propriétés pour le style animation-play-state :




Propriété Définition Valeurs CSS
animation-play-state Permet de mettre en pause ou de reprendre une animation paused
running
CSS 3


Exemple d'utilisation du style css animation-play-state :





<input type="button" value="Pause" style="padding:6px 10px; margin:10px;" onclick="PauseAnim();" />
<input type="button" value="Reprise" style="padding:6px 10px; margin:10px;" onclick="LectureAnim();" />

<div id="animDiv">
   Roule !
</div>

<script type="text/javascript">
   function PauseAnim()
   {
      document.getElementById('animDiv').style.animationPlayState='paused';
      document.getElementById('animDiv').style.MozAnimationPlayState='paused';
      document.getElementById('animDiv').style.WebkitAnimationPlayState='paused';
      document.getElementById('animDiv').style.OAnimationPlayState='paused';
   }

   function LectureAnim()
   {
      document.getElementById('animDiv').style.animationPlayState='running';
      document.getElementById('animDiv').style.MozAnimationPlayState='running';
      document.getElementById('animDiv').style.WebkitAnimationPlayState='running';
      document.getElementById('animDiv').style.OAnimationPlayState='running';
   }
</script>

Le code de l'animation est décrit dans le style css animation-delay.






Roule !