Blog iamvdo.meLes Animations permettent de modifier les valeurs de propriétés CSS plusieurs fois dans le temps, tel un scénario Flash. C’est en fait plusieurs transitions qui s’enchainent !
Comment déclarer une animation ?
Il faut pour cela utiliser @keyframes, lui donner un nom, puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Les mots-clés from et to correspondent respectivement à 0 et 100%.
@keyframes nomAnim{
from { color:blue; }
35% { color:green; }
to { color:red; }
}Utiliser cette animation
Les animations se décomposent en plusieurs propriétés, décrites ici :
-
animation-name: le nom de l’animation à utiliser. -
animation-duration: le temps total de l’animation. -
animation-timing-function: la méthode d’interpolation (accélération, décélération). Voici quelques valeurs possibles :linear,ease,ease-in,ease-out,ease-in-out,steps (nombre, start | end),cubic-bezier( p1, p2, p3, p4) -
animation-iteration-count: le nombre de répétition de l’animation. La valeurinfinitepermet de jouer une animation en continu. -
animation-direction: permet de jouer une animation en sens inverse (en fonction du cycle). -
animation-play-state: mettre en pause l’animation. En cours d’étude de suppression par le W3C. -
animation-delay: le temps avant que l’animation ne démarre. -
animation-fill-mode: conserver l’état de l’animation avant le début où après la fin de celle-ci.
Il existe aussi la propriété raccourcie animation.
Voici un exemple qui utilise l’animation créée ci-dessus. Cette animation durera 5 secondes avec un delai de 2 secondes et utilise une méthode linear, c’est à dire sans accélération, ni décélération.
div{
animation: nomAnim 5s linear 2s;
}Compatibilité dans les navigateurs
Les animations CSS3 sont compatibles avec IE 10, Firefox 5, Chrome 4, Safari 4, Opéra 12 et sur iOS et Android 4. Cependant, pour pouvoir les utiliser, il faut préfixer toutes les propriétés ainsi que les étapes définies avec @keyframes.
@-webkit-keyframes nomAnim{ ... }
@-moz-keyframes nomAnim{ ... }
@-ms-keyframes nomAnim{ ... }
@-o-keyframes nomAnim{ ... }
@keyframes nomAnim{ ... }
div{
-webkit-animation: nomAnim 5s linear 2s;
-moz-animation: nomAnim 5s linear 2s;
-ms-animation: nomAnim 5s linear 2s;
-o-animation: nomAnim 5s linear 2s;
animation: nomAnim 5s linear 2s;
}Note :
- IE10, Firefox 16 et Opera 12.1 supportent les propriétés non-préfixées.
#1par Mourad, le 9 août 2012
Très intéressant. Franchement les animations en CSS sont le meilleur moyen de se débarrasser de JavaScript.
#2par pfdp, le 27 août 2012
Bravo pour les tutos, ils sont vraiment bons et facles à comprendre.
Le seul truc qu’il faudrait ajouter c’est à chaque fois un code complet.
#3par xscientific.olympe.in, le 16 octobre 2013
Enfin ! Enfin un moyen de dire adieu au Jvavascript !
Merci !