Accueil    CSS    Propriété animation-direction
 



style css animation-direction  Style CSS animation-direction

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


La propriété animation-direction permet de définir le sens dans lequel est jouée alternativement l'animation à la fin de sa première occurence.

Par défaut l'animation est rejouée, reprenant sa position initiale définie au niveau de la règle "@keyframes" pour arriver sur sa position finale, mais il est possible de lui faire faire le chamin inverse en spécifiant pour cette propriété la valeur "alternate".

L'animation fait alors un va et vient, effectuant l'animation originale la premiére fois puis l'animation en chemin inverse la suivante et ainsi de suite..

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-direction" et "@-webkit-keyframes"
    - Firefox utilise les propriétés "-moz-animation-direction" et "@-moz-keyframes"
    - Opera utilise les propriétés "-o-animation-direction" et "@-o-keyframes"
    - Internet Explorer n'implémente pas encore les animations css



Propriétés pour le style animation-direction :




Propriété Définition Valeurs CSS
animation-direction Indique dans quel sens est joué l'animation lorsque celle-ci se répète (soit à l'identique soit en alternant de sens à chaque fin de cycle) alternate
normal
CSS 3


Exemple d'utilisation du style css animation-direction :






<style type="text/css">

/* Animation avec animation-direction: normal */
#animDivNormal{
   position:relative;
   width:40px;
   height:40px;
   border:solid 1px black;
   border-radius:20px;
   background-color:#56890E;
   animation-name: animDirection; -webkit-animation-name: animDirection;
   -moz-animation-name: animDirection; -o-animation-name: animDirection;
   animation-duration: 4; -webkit-animation-duration: 4;
   -moz-animation-duration: 4; -o-animation-duration: 4;
   animation-direction: normal; -webkit-animation-direction: normal;
   -moz-animation-direction: normal; -o-animation-direction: normal;
   animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
}


/* Animation avec animation-direction: alternate */
#animDivAlternate{
   position:relative;
   width:40px;
   height:40px;
   border:solid 1px black;
   border-radius:20px;
   background-color:#56890E;
   animation-name: animDirection; -webkit-animation-name: animDirection;
   -moz-animation-name: animDirection; -o-animation-name: animDirection;
   animation-duration: 4; -webkit-animation-duration: 4;
   -moz-animation-duration: 4; -o-animation-duration: 4;
   animation-direction: alternate; -webkit-animation-direction: alternate;
   -moz-animation-direction: alternate; -o-animation-direction: alternate;
   animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
}



@keyframes animDirection { from {left:0px;} to {left:280px;} }
@-webkit-keyframes animDirection { from {left:0px;} to {left:280px;} }
@-moz-keyframes animDirection { from {left:0px;} to {left:280px;} }
@-o-keyframes animDirection { from {left:0px;} to {left:280px;} }

</style>

Animation avec la propriété animation-direction valant normal :
   <div id="animDivNormal">
   </div>

Animation avec la propriété animation-direction valant alternate :
   <div id="animDivAlternate">
   </div>




Animation avec la propriété animation-direction valant normal :


Animation avec la propriété animation-direction valant alternate :