Créer facilement des animations (CSS)

Le code source de base, pour vous entraîner avec moi : https://codepen.io/believemy/pen/KKwQRvR

Le code source corrigé : https://codepen.io/believemy/pen/bGNLwNW

-------------------------------------------------------
Découvrez ou mettez vous à jour avec le HTML5 et le CSS3 : https://bit.ly/formation-html

Si vous voulez créer plus rapidement vos feuilles de style, j'ai également une formation pour vous, apprenez SASS : http://bit.ly/formation-sass
-------------------------------------------------------
Toutes les propriétés liées à la propriété animation :

animation-duration: la durée de l'animation (en secondes ou millisecondes)
animation-name: le nom de l'animation qu'on souhaite utiliser
animation-delay: le temps qu'il faut attendre avant d'executer l'animation (en secondes ou millisecondes)
animation-iteration-count: nombre de répétitions à faire (ou infinite)
animation-direction:
- alternate: revient en sens inverse
- reverse: commence par l'état final, jusqu'à l'état initial
- normal: (par défaut) commence par l'état initial, jusqu'à l'état final
animation-timing-function: l'accélération de l'animation
- ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier, steps(x)... Je vous invite à les tester !

Ces propriétés sont celles utilisées 99% du temps dans la super-propriété animation. Si vous souhaitez voir absolument toutes les propriétés existantes, vous pouvez aller ici : https://developer.mozilla.org/fr/docs....

Pour créer rapidement vos animations, je vous conseils d'utiliser, lorsque vous êtes en panne d'inspiration : https://animista.net

-------------------------------------------------------