animation - Propriété CSS
Résumé des caractéristiques de la propriété animation
animation
ne peut pas être animée.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;
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%.
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-dessousanimation-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. Ainsianimation1
sera jouée cinq fois,animation2
trois fois, etanimation3
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'estanimationend
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 ouinfinite
.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.
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.
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.