CSS : les animations - introduction

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 aux propriétés commençant par le mot animation : 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.

Le code HTML correspondant à l'animation

<div id ="billard"> <div id ="rouge" class ="boule"></div> <div id ="blanche" class ="boule"></div> </div>

Une boîte identifiée billard contient deux boîtes identifiées respectivement rouge et blanche et affectées de la classe boule.

Le code CSS correspondant

#billard {position : relative ; width :90% ; height : 100px; margin : 10px auto 10px auto ; border : 4px solid brown; background : lime ; box-shadow : 10px 10px 10px gray ;} @keyframes deplace { 0% {top : 0px ; left : 0% ; } 25% {top : 90px ; left : 25% ; } 50% {top : 0px ; left : 50% ; } 75% {top : 90px ; left : 75% ; } 100% {top : 0px ; left : 100% ; } } .boule {position : absolute ; width : 16px ; height : 16px ; border-radius :8px ; box-shadow : 4px 4px 4px gray ;} #rouge{background : red; animation : deplace 10s 0s infinite linear;} #blanche{background : white ; animation : deplace 8s 2s infinite linear; }

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.

Dans le cadre du "responsive web design" la largeur du billard est exprimé en %.

Pour un écran normal (largeur supérieure à 900px) le billard fera donc 810px de large (90% de 900) ; 900px étant la largeur de BODY dans cette hypothèse.

.boule {position : absolute ; width : 16px ; height : 16px ; border-radius :8px ;box-shadow : 4px 4px 4px gray ;} : Les boîtes affectées de la classe boule seront des ronds ombrés.

@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 ; répétée à l'infini ; progression linéaire (ou vitesse constante).

#blanche{background : white ;animation : deplace 8s 2s infinite linear; } :
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.


Retour menu