Animation - Propriété CSS

animation

Résumé des caractéristiques de la propriété `animation`

Description rapide

Propriété résumée définissant la plupart des paramètres d'animation : durée, fonction d'accélération, nombre de répétition, direction, etc.

Statut

Standard

Utilisable sur

HTML

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Non.

Type d'animation

Not animable : la propriété animation ne peut pas être animée.

Module W3C

Module CSS - Animations

Références (W3C)

🡇

🡅

CSS Animations Level 2

Statut du document: WD (document de travail)

CSS Animations Level 1

Statut du document: WD (document de travail)

Qu'est ce qu'une animation CSS ?

Une animation CSS est la possibilité de faire évoluer de façon progressive, sur un laps de temps donné, la valeur d'une ou plusieurs propriétés CSS.

Description de la propriété `animation`.

animation est une propriété résumée, qui permet, en une seule écriture, de définir tous les paramètres d'une animation, c'est à dire les valeurs pour les propriétés suivantes :

animation-name : Nom de l'animation.
animation-duration : Durée de l'animation.
animation-timing-function : Dynamique de l'animation (linéaire, accélération, ralentissement, etc.)
animation-delay : Temps d'attente avant le début de l'animation.
animation-iteration-count : Nombre de répétitions de l'animation.
animation-direction : Sens de l'animation (normal ou inverse).
animation-fill-mode : Style de remplacement à appliquer lorsque l'animation n'est pas en cours.
animation-play-state : État de l'animation (en cours d'exécution ou en pause).
animation-timeline : Synchronisation de l'animation sur autre chose que le temps.

La plupart des valeurs sont optionnelles, les deux seules valeurs obligatoires sont le nom et la durée de l'animation. Cependant on précise souvent le nombre de répétitions, celui-ci étant par défaut fixé à 1.

Que les valeurs soient toutes présentes ou pas, l'ordre dans lequel elles sont citées est important : le nom de l'animation doit venir en premier et, si la durée et le délai sont précisés, la durée doit venir avant le délai.

Comme toutes les propriétés résumées, animation initialise toutes les valeurs, même celles qui ne sont pas écrites. Ces dernières sont fixées à leur valeur initiale. Les deux écritures ci-dessous sont donc équivalentes.


	animation: rotation 3s 5;


	animation-name: rotation; 
	animation-duration: 3s;
	animation-timing-function: ease;  
	animation-delay: 0s;
	animation-iteration-count: 5;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;

Lorsqu'il est question de réagir aux actions de l'utilisateur (animer un menu déroulant par exemple, ou rendre un bouton plus sympathique), consultez plutôt la page sur la propriété transition.

Valeurs pour `animation`.

animation: mon-animation 2s infinite;

Cette syntaxe déclare qu'il faut jouer l'animation nommée mon-animation pendant une durée de 2 secondes, et la répéter indéfiniment.
Lorsque une seule valeur de type durée est présente, elle est associée à la durée de l'animation, le délai étant fixé à par défaut à 0 secondes.
animation: mon-animation 3s 5s 2;

Cette syntaxe déclare qu'il faut attendre 5 secondes, puis jouer l'animation nommée mon-animation pendant une durée de 3 secondes, et la répéter 2 fois.
Lorsque deux valeurs de type durée sont présentes, la première est associée à la durée de l'animation, la deuxième au délai avant le démarrage de l'animation.
animation: animation1 3s infinite, animation2 5s 1, ...;

Cette syntaxe déclare plusieurs animations. Les groupes de paramètres correspondant à chacune des animations sont séparés par une virgule. Voir à ce sujet quelques explications sur les animations multiples.
animation: initial; animation: inherit; animation: revert; animation: revertLayer; animation: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Tutoriel : principe des animations CSS.

Les animations permettent de faire évoluer une ou plusieurs propriétés CSS d'une valeur vers une autre, de façon progressive. Dans l'exemple ci-dessous, c'est la propriété width qui évolue entre 50% et 100%.

La propriété width de ce bloc est animée

CSS propose également les transitions (voir transition), qui consistent aussi à faire évoluer une propriété d'une valeur à une autre de façon progressive. La différence est la suivante :

Les animations sont autonomes : elles se déroulent un nombre défini de fois, ou indéfiniment, dès que la page est chargée.
Les transitions ont besoin d'un événement extérieur qui vienne modifier la valeur d'une propriété : code Javascript, action de l'utilisateur, etc.

Dans les exemples ci-dessous, la couleur d'arrière-plan passe progressivement d'une couleur à l'autre. Dans le cas de gauche (animation) ce changement de couleur est automatiquement déclenché, et rejoué indéfiniment si on le souhaite. Tandis que la transition nécessite que la valeur de la propriété soit modifiée, ici par un code Javascript.

Exemple d'animation

Exemple de transition

Plusieurs types d'animation.

Toutes les propriétés ne peuvent pas être animées, et il existe plusieurs types d'animation :

Not animatable : la propriété ne peut pas être animée. En général, c'est à cause de la complexité ou des non-sens que cela créerait. Par exemple les propriétés qui définissent les animations ne peuvent pas être elles mêmes animées.
Discrete (Brutale) : la propriété change automatiquement de valeur, mais cela se fait de façon brutale, sans transition. Les propriétés qui n'acceptent que des valeurs prédéfinies non numériques (font-family par exemple) passeront brutalement d'une valeur à l'autre.
By computed value (continue) : la transition entre les différentes valeurs se fait de façon progressive. En règle générale, les propriétés qui acceptent des valeurs numériques ou des couleurs peuvent être animées de cette façon.
Repeatable list (liste cyclique).
Integer : il s'agit d'une variante du type discrete. Il concerne les propriétés qui n'acceptent que une valeur entière. Bien que numériques ces valeurs ne peuvent pas évoluer de façon continue : elles sautent d'un entier à un autre. C'est le cas de propriétés comme z-index, grid-row, grid-column par exemple.

Comment définir une animation ?

La première chose à faire est de définir l'animation elle-même, c'est à dire quelles sont les propriétés qui doivent évoluer, et dans quelles limites. Cela se fait avec la directive @keyframes. Dans l'exemple ci-après on définit une animation nommée "demo1", qui modifie la propriété width depuis 50% jusqu'à 100%. C'est cette animation qui est appliquée au bloc ci-dessus de façon répétitive.

@keyframes demo1 { from{width:50%;} to{width:100%;} }

Ensuite, l'animation est appliquée à un ou plusieurs des éléments de la page, en définissant la durée, le nombre de répétitions, et éventuellement de nombreux autres paramètres. C'est le rôle de la propriété animation ou des propriétés individuelles équivalentes.


	#tutoriel1 {
	   animation: demo1 2s infinite alternate;
	}

L'animation peut faire évoluer plusieurs propriétés en même temps, ici la largeur et la hauteur d'un élément :

@keyframes demo2 { from {width:50%; height:100px;} to {width:100%; height:50px;} }

Plusieurs étapes dans une animation.

L'animation peut également comporter plusieurs étapes : pas seulement un début et une fin, mais des étapes intermédiaires définies en pourcentages. Les termes from et to correspondent en fait à 0% et 100%.

@keyframes demo3 { from {width:50%;} 50% {width:75%;} to {width:100%;} }

Les animations pilotées par un défilement.

Classiquement, les animations CSS évoluent en fonction du temps, mais il est maintenant possible d'associer une animation au défilement d'un conteneur. Voyez le tutoriel sur les animations pilotées par un défilement.

Animations multiples.

Il est possible de définir plusieurs animations sur un même élément, à condition de les décrire dans une seule règle, soit une seule règle avec la propriété animation soit une seule règle pour chacune des propriétés individuelles. En effet, une deuxième règle écraserait les paramètres de la première.

Chacune des propriétés relatives aux animations peut alors comporter une série de valeurs séparées par des virgules, chacune de ses valeurs correspondant à une des animations. Comment le navigateur va-t-il procéder si le nombre de valeurs est différent d'une propriété à l'autre ?
Dans notre exemple ci-dessous, animation-name comporte trois valeurs, tandis que animation-delay en comporte quatre, et que animation-iteration-count n'en comporte que deux.


	animation-name: animation1,animation2,animation3;
	animation-duration: 1s,2s,5s;
	animation-delay: 10s,20s,10s,30s;
	animation-iteration-count: 5 3;

La propriété qui sert de référence pour dénombrer les animations est animation-name. Dans notre exemple ci-dessous animation-name compte 3 valeurs.
Si les autres propriétés ont un nombre de valeurs identique, les choses sont simples : on affecte chacune des valeurs à l'animation correspondante. Dans notre exemple c'est le cas de animation-duration qui comporte trois valeurs.
Si des propriétés ont des paramètres en plus, ceux-ci seront ignorés. Dans notre exemple animation-delay a quatre valeurs. La dernière valeur ne sera affectée à aucune des animations : elle sera ignorée.
Enfin, dans le cas ou des propriétés ont moins de valeurs, comme animation-iteration-count dans l'exemple, le navigateur affecte les valeurs en bouclant sur celles qui sont disponibles. Ainsi animation1 sera jouée cinq fois, animation2 trois fois, et animation3 sera jouée cinq fois (on est revenu sur la première valeur).
Cas particulier : si une des propriétés n'a qu'une seule valeur, cette dernière s'appliquera à toutes la animations.

La propriété résumée ne permet pas ce fonctionnement car une valeur non définie est fixée à sa valeur initiale. Ce qui n'est pas équivalent à une valeur absente. Dans l'exemple ci-dessous, animation1 est jouée indéfiniment, tandis que les deux autres animations ne sont jouées qu'une seule fois (valeur initiale = 1).


	animation: animation1 1s infinite, animation2 2s, animation3 5s;

Événements liés aux animations.

Plusieurs événements sont associés aux animations, les plus souvent utilisés étant animationstart et animationend :

animationstart : démarrage d'une l'animation.
animationend : fin de toutes les répétitions d'une animation.
animationiteration : fin d'UNE exécution de l'animation. Cet événement n'est pas déclenché à la fin de la dernière exécution d'une animation, c'est animationend qui est déclenché dans ce cas. En conséquence, cet événement n'est déclenché que si la propriété animation-iteration-count a une valeur supérieure à 1 ou infinite.
animationcancel : se déclenche lorsqu'une animation n'a pas été terminée. Plusieurs causes peuvent être envisagées : changement de la propriété animation-name, l'élément n'est plus affiché (dispaly:none), etc.


	<div onanimationstart="this.innerHTML='Animation en cours '"
		 onanimationend="this.innerHTML='Animation terminée '"
		 onanimationiteration="this.innetHTML+='Répétition '"
	></div>

Exemples avec la propriété `animation`.

Voici quelques exemples. Ces animations sont réalisées en CSS pur. Cliquez sur les résultats ci-dessous pour voir les codes CSS.

Animation de la propriété `animation`.

animation ne peut pas être elle-même animée, comme toutes les autres propriétés relatives aux animations.

Manipulation de la propriété `animation` par programme.

Modifier la valeur de `animation` en Javascript.

La directive @keyframes nommée rotation est définie. Le code ci-dessous l'applique l'élément, en précisant la durée et quelques autres paramètres. On voit que Javascript accepte une syntaxe avec le nom de la propriété écrit avec la convention de nommage kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la convention camel-case (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['animation'] = 'boussole 5s linear infinite';
	// ou
	let el = document.getElementById('id');
	el.style.animation = 'boussole 5s linear infinite';

Il y a une petite subtilité pour relancer une animation déjà en cours d'exécution, par exemple pour la remettre à son point de départ. Pour relancer une animation à partir de son point de départ, il faut d'abord annuler l'animation en cours, et la relancer ensuite. Mais ces deux actions doivent être séparées par un court laps de temps. Ce qui peut se faire avec la fonction setTimeout() de Javascript.


function resetAnimation(el) {
   el.style.animation='none';
   setTimeout(function() {
      el.style.animation='boussole 5s linear infinite';
   },200);
}

Lire en Javascript la valeur de `animation`.

La propriété animation doit avoir été affectée directement à l'élément lui-même via l'attribut style du HTML, et non pas en passant par un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['animation'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.animation;

Lire la valeur calculée de `animation` en Javascript.

La valeur calculée est déterminée par le navigateur, après résolution de la cascade des héritages et des règles de priorité (voir Les priorités). Les unités sont standardisées : par exemple les durées sont exprimées en secondes.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('animation');

Modifier la valeur de la propriété `animation` avec JQuery.

Pour les adeptes de JQuery, il y a également une syntaxe pour définir la valeur de animation ou relire sa valeur calculée.


 $('#id').css('animation', 'boussole 5s linear infinite');

Lire la valeur calculée de la propriété `animation` avec JQuery.


	let value = $('#id').css('animation');

faite le vous-même.

Les deux bouton sci-dessous appliquent la valeur saisie à un élément, puis affiche la valeur affectée pour le premier, et la valeur calculée pour le second. Cela permet de voir comment sont mémorisées les valeurs, en particulier les temps qui sont ramenés en secondes quelque soit l'unité utilisée pour les définir.

Prise en charge de `animation` par les navigateurs.

Comme le montre le tableau de compatibilités ci-dessous, les animations en CSS sont correctement restituées par tous les navigateurs actuels.

Colonne 1

Capacité de prendre en charge de façon générale les animations en CSS.

Support des
animations

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `animation`.

Module CSS - Animations Niveau 1

Introduction des animations en CSS et définition des propriétés correspondantes, dont la propriété résumée animation.

20 Mars 2009
Document de travail.
Module CSS - Animations Niveau 2

La propriété résumée animation est étendue pour inclure la nouvelle propriété animation-timeline.

02 Mars 2023
Document de travail.

Voir aussi, à propos des animations.

Toutes les définitions concernant les animations en CSS sont regroupées dans la spécification "Module CSS - Animations" (voir CSS Animations). La propriété animation, ainsi que les suivantes, figurent donc dans cette spécification.

Propriétés :

animation-composition

Définit comment interagissent plusieurs animations appliquées à la même propriété.

animation-delay

Temps d'attente avant le démarrage de l'animation.

animation-direction

Sens de l'animation (normal ou inverse).

animation-duration

Définit la durée totale d'un cycle d'animation.

animation-fill-mode

Définit le remplacement lorsque l'animation n'est pas en cours d'exécution.

animation-iteration-count

Définit le nombre de fois qu'une animation doit être jouée.

animation-name

Définit l'animation à appliquer à l'élément.

animation-play-state

État de l'animation (en cours ou en pause).

⚠

animation-timeline

Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.

animation-timing-function

Définit la fonction d'accélération à utiliser pendant une animation.

Directives :

@keyframes

Définit le nom d'une animation et quelles sont les propriétés qui sont animées.