Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 la propriété raccourcie 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

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

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

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

Le code HTML correspondant

Il est d'une simplicité déconcertante.

Le conteneur SECTION doit être positionné (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

Tout cela mérite quelques explications.

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, rythme de progression).
En fait elle peut comprendre jusqu'à huit paramètres.
Plutôt que d'utiliser la propriété raccourcie animation on peut utiliser à la place 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 ; }
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

Exemple

Observez le caractère très saccadé de cette animation

Le code CSS correspondant

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

Quand au code HTML, il est des plus simple : une balise DIV avec l'attribut id ="rond".

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

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 code correspondant

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

Observez la taille de l'objet à la fin 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

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.
Le paramètre "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

Observez les changements de filtres et de taille

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

Le code correspondant

Le CSS :

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

Le code HTML :

Deux boutons de commande !

Chaque bouton associé à une fonction Javascript-jQuery.
Le script jQuery :

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 !