Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

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

<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 : 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 : 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 "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; } :
Le raccourci animation a ici cinq 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 2s secondes après le chargement de la page, répétée à l'infini, le rythme de progression est linéaire.

La méga propriété (ou "raccourci") animation peut comprendre jusqu'à 8 paramètres.

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

Affichez cette page à partir d'un ordinateur portable ou d'une "tour".

Exemple

Observez attentivement le déplacement des boules

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: 0%; }
		40% {top :0px; left: 99%;}
		50% {top : 220px ; left :99%;}
		90% {top : 220px;left :0%; }
		100% {top :0px; left :0%;} 	
}
@keyframes tour_bug
{ 
		0%{top :0px; left: 0%; }
		25% {top :0px; left: 99%;}
		50% {top : 220px ; left :99%;}
		75% {top : 220px;left :0%; }
		100% {top :0px; left :0%;} 	
}
.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

Il est d'une simplicité déconcertante.

<section style ="position : relative ; width : 800px ; height : 200px ; border : 1px solid red;"> <div id="rouge" class ="boule"></div> <div id="verte" class ="boule"></div> </section>

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

Analyse du code

Tout cela mérite quelques explications.

Sur un grand écran, la page fait 900 pixels de large donc le conteneur SECTION fera aussi 900px de large (100%).
Les boules doivent donc parcourir 890px (99% de 900) en largeur et 190px en hauteur.

Ici on applique à chaque boule un modèle de déplacement 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 et très lentement 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 890px en 4 secondes (10 secondes * 40%) et 220px en 1 seconde (10 s * 10%). Donc la vitesse de déplacement de la balle rouge est quasi constante : 222 (890/4) ou 220 pixels à la seconde.

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

J'ai 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, progression).
En fait elle peut comprendre jusqu'à huit paramètres.
Plutôt que d'utiliser la méga propriété animation on peut à la place utiliser jusqu'à 8 propriétés préfixées animation-.

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 ; }
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

La valeur retenue s'applique à chaque étape de l'animation.
Donc cette propriété a un intérêt surtout pour les modèles d'animation ne comportant que deux étapes étiquetées avec les mots from et to (ou 0% et 100%).

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 négative !
Si la valeur est négative l'animation débutera immédiatement ! Par exemple, si on utilise la valeur -2s comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout de 2 secondes.

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 ... Voir l'exemple plus loin dans la même page.

animation-fill-mode

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

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.

La "direction" de l'animation par l'exemple

Observez attentivement la variation de taille des carrés

Les carrés ci-dessous sont de plus en plus grands puis de plus en petits et le cycle reprend à l'infini.
Le carré do fond "corail' grossit à partir de son centre alors que le carré de fond "violet" grandit à partir de l'angle haut gauche.

Le code correspondant

... @keyframes agrandir { 0% {transform: scale(1,1); } 50% {transform :scale(2,2); } 100% {transform :scale(3,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 ; transform-origin : top left ;} ... <body style ="position : absolute ; top : 200px ; left: 10% ; border : 1px solid red; 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 veut dire que le sens de lecture du modèle d'animation change à chaque cycle (sens normal puis l'inverse et de nouveau le sens normal).

Par défaut le point d'origine d'une transformation d'un élément HTML est le centre de cet objet.
#carre2 { ... ; background : purple; transform-origin : top left) : pour le carré violet j'ai modifié le point d'origine de la transformation.

Le "fill-mode" par l'exemple

Exmple

Observez bien !

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

Le code correspondant

... @keyframes grossir { from {transform :scale(1,1); } to {transform : scale(3,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.

Pour ceux qui connaissent les animations au format SVG c'est l'équivalent de l'attribut fill = "freeze" de la balise animate. On dit qu'on gèle l'animation.

Le "play-state" par l'exemple

Exemple

Observez les changements de filtre de l'image

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.

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 en jQuery :

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

Attention il faut écrire la propriété de style avec la syntaxe javaScript appelée "camelCase".
Ne pas oublier de charger la bibiothèque jQuery !