Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

animation - Propriété CSS

animation

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

Description rapide
Paramètres d'animation.
Statut
Standard
Type de valeur
Voir les propriétés individuelles.
Pourcentages
Ne s'appliquent pas.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non
Type d'animation
Not animatable : la propriété animation ne peut pas être animée.
Module W3C
Module CSS - Animations
Références (W3C)
 🡇  
 🡅  
Statut du document:: ED (brouillon des éditeurs)

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 :

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; anmation-duration: 3s; animation-timing-function: ease;   animation-delay: 0s; animation-iteration-count: 5; anmation-direction: normal; anmation-fill-mode: none; animation-play-state: running;

Consultez également la page sur la propriété transition.

Exemples de syntaxes 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: revert-layer; animation: unset;

    La valeur initiale est : Voir les propriétés individuelles..

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 autoamtiquemetn 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).

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

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éneent 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.

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

Exemple d'animation : boussole
Exemple d'animation en CSS pur : flou
Exemple d'animation en CSS : ballon
Exemple d'animation avec CSS : roue

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.

Bien entendu, il n'est pas nécessaire d'écrire un code Javascript pour réaliser l'animation : CSS le fait très bien tout seul. Mais Javascript peut être intéressant pour démarrer l'animation, ou la paramétrer (définir la durée ou les autres paramètres).

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


function setAnimation(el) {
el.style['animation']='boussole 5s linear infinite';
// ou
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. Vous constaterez qu'en cliquant une deuxième fois sur le bouton de test ci-dessus, rien ne se passe. En fait, 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 nous conduit au code ci-dessous, qui fait appel à 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.

La valeur de animation est renvoyée complète, avec toutes les valeurs, même si seulement certaines ont été définies. Les autres ont été fixées aux valeurs initiales des propriétés correspondantes.


function getAnimation(el) {
alert(el.style['animation']);
// ou
alert(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 règles de priorité). Les unités sont standardisées : par exemple les durées sont exprimées en secondes.


function getCalcAnimation(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation'));
}

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


function setAnimation(el) {
$(el).css('animation','flou 1s linear infinite');
}

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


function getCalcAnimation(el) {
return $(el).css('animation');
}

Prise en charge des animations 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.

1
Animations
Estimation de la prise en charge en pourcentage du parc actuel.
98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que animation.

Les spécifications CSS éditées par le W3C sont organisées en modules. animation fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit comment interagissent plusieurs animations appliquées à la même propriété.
Temps d'attente avant le démarrage de l'animation.
Sens de l'animation (normal ou inverse).
Définit la durée totale de l'animation.
Style de remplacement lorsque l'animation n'est pas en cours.
Définit le nombre de fois qu'une animation doit être jouée.
Définit l'animation à appliquer à l'élément.
État de l'animation (en cours ou en pause).
Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
Définit la fonction d'accélération à utiliser pendant une animation.

Directives.

Définit le nom et les paramètres d'une animation.