Animations d'éléments HTML via CSS

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 (ou saccadée) de l'état 1 à l'état 2 puis à l'état 3 jusque l'état N. Il faut alors produire une animation.

Pendant longtemps les animations d'éléments HTML étaient réalisées via JavaScript. Mais grâce à la version 3 de CSS, il est possible de programmer facilement des animations en CSS.

La règle CSS3 @keyframes permet de définir un "modèle" d'animation avec de nombreuses étapes.
Et ensuite ce "keyframes" peut être appliqué de façon personnalisée à différents éléments HTML via le raccourci animation (ou via les 8 propriétés préfixées "animation-".

Les animations proposées dans ce chapitre sont 2D. Vous verrez dans une autre page que l'on peut aussi réaliser des animations 3D.

Première animation CSS

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 !
La boite "billard" n'est pas 3D mais l'animation a cependant un peu de relief grâce aux ombres porté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 DIV identifiés respectivement rouge et blanche.
Ces deux éléments DIV ont la forme de ronds ...

Le code CSS correspondant

#billard {position : relative ; width :100%  ; height : 110px; margin : 10px ;  
	border : 4px solid brown; background : lime ; box-shadow : 10px 10px 10px gray ; 
	border-radius : 5px;}
@keyframes deplace
	{ 
		0% {top : 0px ; left : 0% ; }
		25% {top : 90px ; left : 50% ; }
		50% {top : 0px ; left : 100% ; }
		75% {top : 90px ; left : 50% ; }
		100% {top : 0px ; left : 0% ; }
	}
.boule {position : absolute  ;  width : 16px ; height : 16px ; border-radius :8px ; box-shadow : 4px 4px 4px gray ;}

#rouge{background : red; animation : deplace 20s 0s infinite linear;}
#blanche{background : white ; animation : deplace 16s 2s infinite linear; }

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

#billard {position : relative ;width : % ; 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 est elle aussi positionnée (ici en relatif).

.boule {position : absolute ; width : 16px ; height : 16px ; border-radius :8px ;box-shadow : 4px 4px 4px gray ;} : grâce à cette classe appliquée à des DIV, je dessine des boules ombrées.

@keyframes deplace { ... } : on définit un modèle d'animation appelé deplace
Ce modèle d'animation comprend 5 étapes.
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 étant exprimée en %, le left doit aussi être exprimé en %.

#rouge{background : red; animation : deplace 10s 0s infinite linear;} : on remplit l'élément 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 avec une 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 blanche).
L'animation deplace durera pour cet objet 8 secondes, démarre 2s secondes après le chargement de la page, se répète à l'infini et le rythme de la progression est linéaire.

De l'importance de la valeur des pourcentages dans le modèle d'animation

Exemple : rendu

La vitesse de déplacement de la boule rouge est constante ce qui n'est guère le cas de la boule verte qui se déplace très vite dans les horizontales mais très lentement dans les verticales. Pourquoi ???

Le CSS correspondant

@keyframes tour_ok
{ 
		0%{top :0px; left: 0px; }
		40% {top :0px; left: 890px;}
		50% {top : 220px ; left :890px;}
		90% {top : 220px;left :0px; }
		100% {top :0px; left :0px;} 
}
@keyframes tour_bug
{ 
		0%{top :0px; left: 0px; }
		25% {top :0px; left: 890px}
		50% {top : 220px ; left :890px;}
		75% {top : 220px;left :0px; }
		100% {top :0px; left :0px;} 
}

.boule
{
    width: 16px;
    height:16px ;
    border-radius: 8px;
	position : absolute ; top: 0px ; left : 0%; 
  	box-shadow : 5px 5px 5px grey;
}
#rouge{ animation : tour_ok 10s 0s infinite linear; background : red; }
#verte{ animation : tour_bug 10s 1s infinite linear; background : green; }

Le code HTML correspondant

<section style ="position : relative ; width : 900px ; height : 230px ;">
	<div id="rouge" class ="boule"></div>
	<div id="verte" class ="boule"></div>
</section>

Le conteneur SECTION doit être positionné (en relatif ou absolu) afin que les coordonnées des éléments enfants (les boules) soient calculées par rapport à l'angle haut gauche de SECTION.

Analyse du code

Ici on applique à chaque boule un keyframes différent : tour_bug à la boule verte et tour_ok à la boule rouge.

Chaque modèle d'animation comprend 5 étapes.

Dans le modèle d'animation tour_bug les sélecteurs des différentes étapes sont : 0%,25%,50%,75%,100%.
La balle verte met donc 2,5 secondes (10 secondes * 25%) pour parcourir une horizontale (890px) OU une verticale(220px). Donc elle se déplace vite sur l'axe X que sur l'axe Y.

Pour que la vitesse de déplacement de la balle soit constante (boule rouge) les différents sélecteurs de chaque étape doivent être 0%, 40%, 50%, 90% et 100%. C'est ce qui est prévu dans le modèle tour_ok.
La balle parcourt alors 890 pixels en 4 secondes (10 s * 40%) et 220px en 1 seconde (10 s * 10%). Donc la vitesse de déplacement de la balle rouge est quasi constante : environ 220px à la seconde.

Les autres propriétés préfixées 'animation-'

J'avais dit dans un premier temps (pour ne pas complexifier) que le raccourci animation comprenait cinq paramètres (nom_modèle, durée, délai de déclenchement, itération, rythme de progression). En fait elle peut comprendre jusqu'à huit paramètres.

Plutôt que d'utiliser le raccourci animation on peut utiliser à la place jusqu'à 8 propriétés préfixées animation-.

animation-name
animation-duration,
animation-timing-function,
animation-delay,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.

Examinons plus en détail toutes ces propriétés !

Animation-name

Cette propriété définit une liste d'animations qui doivent être appliquées à l'élément ciblé.
Exemple : #boite{animation-name : grossir, deplacer ; }
Dans l'exemple deux animations vont s'appliquer successivement à l'élément "boite".

Animation-duration

Cette propriété définit la durée d'une animation pour parcourir un cycle.
La durée du cycle peut être exprimée en secondes (s) ou en millisecondes (ms).

Animation-timing-function

transition-timing-function

ease : vitesse rapide au début et ralenti à la fin
linear: vitesse constante c'est la valeur par défaut
ease-in : lent au début et de plus en plus accéléré vers la fin
ease-out : rapide sur le début et de plus en plus décéléré vers la fin
ease-in-out : le départ et la fin sont lents
steps(n,start/end) : animation saccadée. La valeur n s'applique à chaque étape de l'animation.

Exemple : rendu

Le code CSS correspondant

#rond {background : red ; width : 50px ; height : 50px ; border-radius : 25px; margin : auto ;}
@keyframes grandir-foncer 
{
0% {transform:scale(1) ; opacity : 0.1; }
25% {transform:scale(2) ; opacity : 0.3; }
50% {transform:scale(4) ; opacity : 0.7; }
100% {transform:scale(8) ; opacity : 1; }
}
#rond {animation : grandir-foncer 6s 0s  steps(2,start) infinite  alternate;  }

L'animation sera saccadée puisque la valeur du paramètre "animation-timing-function" est "steps()".

Animation-delay

Cette propriété définit le délai d'attente avant de démarrer une animation.
La valeur par défaut est 0s.
La valeur est exprimée en secondes ou millisecondes et peut être négative !

Animation-iteration-count

Cette propriété indique le nombre de cycles d'une animation.
La valeur par défaut est 1.
La valeur peut être "infinite" ou un nombre même décimal. Par exemple : 2.5 pour que le troisième cycle ne soit effectué qu'à moitié.

Animation-direction

Cette propriété indique dans quel ordre les étapes de chaque cycle doivent être exécutées.
La valeur par défaut est normal. La valeur alternate peut-être très très pratique.
Avec la valeur "alternate" la lecture de l'animation se fait de façon alternée et change de sens à chaque cycle. Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite. On crée donc un effet "aller-retour".

Exemple : rendu

Les carrés ci-dessous sont de plus en plus grands puis de plus en petits et le cycle reprend à l'infini.

Le code correspondant

...
@keyframes agrandir
{ 
0% {transform: scale(1);  }
50% {transform :scale(2);  }
100% {transform :scale(3); }
}
#carre1 {width : 50px ; height :50px ; background : coral; 
	animation : agrandir 5s 0s infinite linear alternate ;}
#carre2 {width : 50px ; height :50px ; background : purple; 
	animation : agrandir 5s 0s infinite linear alternate ;}
...
<body style ="position : absolute ; top : 200px ; left: 10% ; 
	width : 80% ; height : 400px;">
...
	<div id ="carre1"></div>
	<div id ="carre2"></div>
...

Dans le modèle animation agrandir je ne programme que l'agrandissement et pourtant appliqué aux carrés ceux-ci grandissent puis diminuent alternativement.
Observez bien les paramètres de la méga propriété animation pour les deux carrés.
animation : agrandir 5s 0s infinite linear alternate ;
alternate : la lecture de l'animation se fait de façon alternée et change de sens à chaque cycle. Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.

Animation-fill-mode

Cette propriété indique s'il faut "geler" l'état de l'élément à la fin de l'animation. Un petit exemple vaut mieux qu'un long discours !

Exemple : le rendu

Le cercle garde la taille atteinte à la fin de l'animation. N'hésitez pas à actualiser la page pour redémarrer l'animation.

Le code correspondant

...
@keyframes grossir
{
from {transform :scale(1); }
to {transform : scale(3); }
}
#rond {width :80px; height : 80px ; position : absolute; top : 100px ; left : 100px;  
	border-radius : 40px ; background : cyan; 
	animation : grossir 5s 0s 3 linear alternate forwards; }
...
<body style ="position : absolute ; top : 200px ; left: 10% ; border : 1px solid red; 
	width : 80% ; height : 400px;">
...
<div id ="rond"></div>
...

Observez bien les arguments de la méga propriéte animation pour l'objet "rond" :
animation : grossir 5s 0s 3 linear alternate forwards; : l'animation n'est répétée que trois fois avec alternance donc le troisième cycle exécute les étapes dans le sens normal (grossit le rond). La boule garde sa taille à la fin de l'animation grâce au paramètre forwards. On dit que l'on "gèle" l'animation.
La commande "animation-fill-mode" à "forwards" n'a aucun sens dans le cadre d'une animation qui se répète à l'infini.

Animation-play-state

La propriété animation-play-state détermine si une animation est en cours d'exécution ou si elle est en pause.
La valeur par défaut est running (animation en cours) ; l'autre valeur est paused
Grâce à cette propriété on peut redémarrer/suspendre une animation à partir d'un évènement.

Exemple : le rendu

Un bouton de commande pour démarrer l'animation et autre pour la suspendre.

Le code correspondant

Le CSS : ... @keyframes filtrer { 0%,100% {filter : hue-rotate(0deg); width : 20% ;} 25% {filter : hue-rotate(90deg);width : 30% ;} 50% {filter : hue-rotate(180deg);width : 40% ;} 75% {filter : hue-rotate(270deg);width : 50% ;} } img {width : 20% ; animation : filtrer 10s 0s linear infinite alternate forwards running ;}

L'image est de plus en plus grande et de plus en plus violette.

Le code HTML : ... <button onclick ="stop()">Suspendre animation</button> <button onclick ="go()">Reprendre animation</button> <img src ="../images/bikini.jpg" /> ...

Deux boutons de commande !

Chaque bouton associé à une fonction Javascript-jQuery.

Le script jQuery : function stop() { $("img").css("animationPlayState","paused"); } function go() { $("img").css("animationPlayState","running"); }

la fonction stop fait passer la valeur de la propriété animation-play-state à "paused"
la fonction go fait passer la valeur de la propriété animation-play-state à "running"

Attention dans le cadre d'un script, il faut écrire les propriétés avec la syntaxe javaScript ("camelCase").
Ne pas oublier , non plus, de charger la bibiothèque jQuery !
Le recours au framework jQuery n'était pas indispensable.

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

Animations d'éléments HTML via CSS

Première animation CSS

Le code HTML correspondant à l'animation

Le code CSS correspondant

De l'importance de la valeur des pourcentages dans le modèle d'animation

Exemple : rendu

Le CSS correspondant

Le code HTML correspondant

Analyse du code

Les autres propriétés préfixées 'animation-'

Animation-name

Animation-duration

Animation-timing-function

Exemple : rendu

Le code CSS correspondant

Animation-delay

Animation-iteration-count

Animation-direction

Exemple : rendu

Le code correspondant

Animation-fill-mode

Exemple : le rendu

Le code correspondant

Animation-play-state

Exemple : le rendu

Le code correspondant