Comment ça fonctionne?

qu’est ce qu'une animation?

“Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part”. src : mozilla

Étapes par étapes

donc comme dit ci-dessous une animation ce fait à partir d’étapes où l’on va donner un état donné différent à chacune d’elles ce qui est par définitions une animation. Pour ce qui est du cheminement entre chaque étape, cela se fait automatiquement. Voilà quelques exemples de syntaxes d’animations en CSS :

@keyframes color {
0% {
background-color:
red;}
25% {
background-color:
yellow;}
50% {
background-color:
blue;}
100% {
background-color:
green;}
}

l'animation se nommant “color” est une animation ayant trois étapes,la première est l’étape de mise en route, une à 25% de l’animation, une autre à 50% et la dernière à la fin de celle-ci. les étapes donne au background les couleurs suivantes dans l’ordre rouge, jaune, bleu et enfin vert.

Mettre en relation

Il faudra ensuite mettre l’élément en relation avec l’animation. Après avoir lié l’animation et l’élément il faut définir comment l’animation sera jouée voilà quelques exemples :