Les 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 !
Il faut pour cela utiliser @keyframes, lui donner un nom, puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Lorsqu'ils sont employés, les mots-clés from et to correspondent respectivement à 0 et 100%.
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.
Les navigateurs actuels supportent les keyframes sans préfixes.
Je clignote !
La boîte doit devenir rouge à la moitié de la durée totale de l'animation, pour revenir à sa couleur initiale à la fin de l’animation. Nous aurons donc trois keyframes : à 0%, 50% et 100%. À chaque étape nous indiquerons la couleur à atteindre avec la propriété background-color. L’animation est nommée monAnimation.
@keyframes monAnimation {
0% {
background-color: blue;
}
50%{
background-color: red;
}
100%{
background-color: blue;
}
}