Animation en CSS3 - approndissements

Dans cette page quatre exemples d'animation CSS.
Dans le cadre du "responsive web design" la largeur des éléments est exprimée en %.
Je vous rappelle que pour un écran "normal" (largeur > à 900px) la page (BODY) à une largeur de 900px.

Premier exemple : de l'importance de la valeur des pourcentages dans le modèle d'animation

Dans le cadre d'un écran "normal" (largeur supérieure à 900px) chaque balle parcourt un rectangle de 810 (900 *90%) sur 200 en 10 secondes et ce de façon infinie.
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 code correspondant

... <style> @keyframes tour_ok { 0%{left : 0% ; top :0px;} 40% {left: 90%; top :0px; } 50% {top :200px;left :90%;} 90% {left :0%; top : 200px;} 100% {top :0px; left :0%;} } @keyframes tour_bug { 0%{left : 0% ; top :0px;} 25% {left: 90%; top :0px; } 50% {top :200px;left :90%;} 75% {left :0%;top : 200px;} 100% {top :0px; left :0%;} } .boule{ width: 16px; height:16px ; border-radius: 8px; position : relative ; box-shadow : 5px 5px 5px grey;} #rouge{ animation : tour_ok 10s 0s infinite linear; background : red; } #verte{ animation : tour_bug 10s 2s infinite linear; background : green; } ... <body> ... <div id="rouge" class ="boule"></div> <div id="verte" class ="boule"></div> ...

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.
Les déplacements horizontaux sont quatre fois plus longs que les déplacements verticaux (810px (90% de 900px) par rapport à 200px).

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 2 secondes et demi (10 secondes * 25%) pour parcourir une horizontale ou une verticale. Donc elle se déplace vite sur l'axe X et lentement sur l'axe Y.

Pour que la vitesse de déplacement de la balle soit constante 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 800px en 4 secondes (10 secondes * 40%) et 200px en 1 seconde (10 s * 10%). Donc la vitesse de déplacement de la balle rouge est constante : 200 pixels par seconde.

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

Pour simplifier mon discours j'ai dit jusqu'à présent que la méga propriété animation comprenait cinq paramètres : nom_modèle, durée animation, délai de déclenchement, itération, progression.

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 la durée 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.

Exemple 2 : la "direction" de l'animation par l'exemple

Les carrés ci-dessous sont de plus en plus grands puis de plus en petits et le cycle reprend à l'infini.
Le carré de 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> ... <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.

Exemple 3 : le "fill-mode" de l'animation

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(2,2); } } #rond {width :80px; height : 80px ; border-radius : 40px ; background : cyan; animation : grossir 5s 0s 3 linear alternate forwards; } ... <body> ... <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.

Exemple 4 : le "play-state" de l'animation

Le code correspondant

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 !