CSS : animations via CSS3 avec un keyframes

Nous avons vu les transitions en CSS. Une transition n'autorise que le passage progressif pour un élément d'un état initial à un état final.

Mais si on veut qu'un élément passe de façon fluide de l'état 1 à l'état 2 puis à l'état 3 jusque l'état N. Il faut alors produire une animation.

La règle @keyframes permet de définir un "modèle" d'animation avec de nombreuses étapes. Et ensuite ce "modèle" animation peut être appliqué à différents éléments et avec personnalisation grâce à toutes les propriétés d'animation proposées par CSS3 : animation-name, animation-duration, animation-delay, etc
ou grâce au raccourci animation.

Deux boules se déplacent sur le billard. La boule blanche démarre après la boule rouge mais est plus rapide que la rouge.
Les collisions ne sont pas gérées !

Le code HTML correspondant à l'animation

Une boite identifiée billard contient deux boites identifiées respectivement rouge et blanche et qui ont la forme de ronds ... : un cercle rouge et un cercle blanc !

Le code CSS correspondant

Observons attentivement les différentes règles de style !

#billard {position : relative ;width : 90% ; height : 100px ; margin : 10px auto 10px auto; ... } : On dessine un billard centré dans la page. Afin de pouvoir appliquer le positionnement absolu aux "enfants" de "billard" (les boules) cette boite est positionnée en relatif.

.boule {position : absolute ; width : 16px ; height : 16px ; border-radius :8px ;box-shadow : 4px 4px 4px gray ;} : Les éléments affectés de la classe boule deviennent des ronds ombrés grâce aux propriétés border-radius, box-shadow et sont positionnés en absolu dans leur parent (boite "billard").

@keyframes deplace { ... } : on définit un modèle d'animation appelé deplace
Ce modèle d'animation comprend 5 étapes ou règles. Examinons la première étape.

0% {top : 0px ; left : 0% ; } : Chaque règle commence par un pourcentage en guise de sélecteur suivi par des paires de propriétés et valeurs ; puisque la largeur du conteneur est exprimée en % le left doit aussi être exprimé en %.
Un modèle comprend au minimum deux étapes avec respectivment les sélecteurs 0% et 100% qui peuvent être alors remplacés par les mots réservés from et to.

#rouge{background : red; animation : deplace 10s 0s infinite linear;} : on remplit l'objet identifié rouge de cette couleur et on applique le modèle d'animation deplace à cet objet.
L'animation deplace durera pour cet objet 10 secondes, démarre à 0 secondes après le chargement de la page, se répète à répétée à l'infini , progression linéaire (ou vitesse constante), alternance dans le sens de lecture des étapes du keyframes.

#blanche{background : white ;animation : deplace 8s 2s infinite linear alternate; } :
La méga propriété animation a six paramètres !
On applique la règle d'animation deplace à l'objet identifié blanche (boule remplie de blanc).
L'animation deplace durera pour cet objet 8 secondes, démarre à 2 secondes après le chargement de la page, répétée à l'infini, progression linéaire, alternance dans le sens de lecture des cinq étapes du keyframes.

Vous comprenez pourquoi l'animation d'éléments HTML (ou SVG) via CSS risque de devenir la norme.

Les huit propriétés préfixées "animation-" sont étudiées de façon approfondie dans le chapitre suivant Suite !
Retour menu