animation
La propriété animation
est une propriété raccourcie qui permet d'appliquer une animation entre des styles.
C'est une propriété qui synthétise les propriétés suivantes :
Exemple interactif
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
Exemple d'animation
Une liste des propriétés qui peuvent être animées est disponible. On notera que cette liste est également valable pour les transitions CSS.
Syntaxe
La propriété animation
se définit grâce à une ou plusieurs animations, séparées par des virgules.
Chaque animation se définit comme :
- zéro ou une valeur du type :
- un nom optionnel pour l'animation ; celui-ci peut être le mot-clé
none
, un identifiant (<custom-ident>
) ou une chaîne de caractères (<string>
) - zéro, une ou deux valeurs de type
<time>
L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type <time>
sera affectée à animation-duration
et la deuxième à animation-delay
.
L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur de animation-name
parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés que animation-name
et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non à animation-name
. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pour animation-name
qui pourrait être une valeur pour une autre propriété.
Valeurs
<single-animation-iteration-count>
-
Le nombre de fois où l'animation est jouée, cf.
animation-iteration-count
. <single-animation-direction>
-
La direction dans laquelle s'effectue l'animation, cf.
animation-direction
. <single-animation-fill-mode>
-
La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf.
animation-fill-mode
. <single-animation-play-state>
-
Si l'animation est lancée ou non, cf.
animation-play-state
.
Définition formelle
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | Not animatable |
Syntaxe formelle
animation =
<single-animation>#
<single-animation> =
<time [0s,∞]> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear |
<linear()>
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>
<step-easing-function> =
step-start |
step-end |
<steps()>
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Exemples
Note : D'autres exemples sont disponibles sur la page Manipuler les animations CSS.
Vue laser
HTML
<div class="view_port">
<div class="polling_message">En attente</div>
<div class="cylon_eye"></div>
</div>
CSS
.polling_message {
color: white;
float: left;
margin-right: 2%;
}
.view_port {
background-color: black;
height: 25px;
width: 100%;
overflow: hidden;
}
.cylon_eye {
background-color: red;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.9) 25%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.9) 75%
);
color: white;
height: 100%;
width: 20%;
-webkit-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
@keyframes move_eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
Résultat
Accessibilité
Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.
Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliser une requête média avec prefers-reduced-motion
pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.
- Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article (en anglais)
- An Introduction to the Reduced Motion Media Query - CSS-Tricks (en anglais)
- Responsive Design for Motion - WebKit (en anglais)
- Comprendre les règles WCAG 2.2
- Understanding Success Criterion 2.2.2 - W3C Understanding WCAG 2.0 (en anglais)
Spécifications
Specification |
---|
CSS Animations Level 1 # animation |
Compatibilité des navigateurs
BCD tables only load in the browser