Sommaire

Les transitions et animations Transitions Animations

Il est possible de faire des animations en CSS. Cela se fait en deux étapes. Dans un premier temps, des images clés (keyframes) doivent être définies en utilisant le mot-clé @keyframes suivi du nom donné à l’animation.

Lors de l’utilisation de l’animation, il faut indiquer la durée. La définition de l’animation n’attend pas du temps, mais du pourcentage de temps.

@keyframes blink_anim {   
    0% { color: #D00; } 
    100% { color: #666; } 
}

Il est défini qu’au début de l’animation, à 0%, la couleur sera rouge (#D00). À la fin de l’animation à 100% du temps, que ce soit au bout de 1 seconde ou au bout de 10 secondes, la couleur sera grise. Et ce sera lors de l’utilisation de l’animation blink que sera définie la durée de l’animation :

.blink { 
    animation: blink_anim 1s linear infinite; 
}

Ici, le style de classe .blink utilise l’animation blink_anim pendant 1 seconde. Donc le texte passera du rouge au gris en 1 seconde.

Le mot-clé linear indique que le passage de 0 à 100 % se fera d’une manière constante. Il est cependant possible d’avoir une accélération au début ou à la fin pour donner une animation plus rythmée. 

Le site alsacreations propose à l’adresse http://www.alsacreations.com/tuto/lire/876-transitions-css3-transition-timing-function.html ...