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 à toutes les propriétés d'animation proposées par CSS3 : animation-name, animation-duration, animation-delay, etc
ou grâce à la méga propriété 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

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

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

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

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.
Pour un petit écran (tablette, smartphone) le billard fera 90% de la largeur de l'écran (car BODY fait alors 100% de la largeur de l'écran).

.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.

@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 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 du modèle d'animation.

Dans la page suivante les huit propriétés "animation-" sont étudiées de façon approfondie.
Retour menu