Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété animation est une propriété raccourcie pour les propriétés suivantes :
animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state.
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.
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
| Héritée | non |
| Média | visuel |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Animable | non |
| Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
Syntaxe
/* @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;
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é.
Syntaxe formelle
<single-animation>#où
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || <single-animation-name>où
<single-timing-function> = <single-transition-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<single-animation-name> = none | IDENToù
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
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: -webkit-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
background-image: -moz-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
background-image: -o-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
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;
-moz-animation: 4s linear 0s infinite alternate move_eye;
-o-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%; } }
@-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
@-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
@keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Animations La définition de 'animation' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | (Oui)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0)[2] |
10 | 12-o 12.50[3] |
4.0-webkit |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | 2.1 -webkit [1] 4.0 -webkit |
5.0 (5.0)-moz 16.0 (16.0)[2] |
? | ? | (Oui)-webkit |
[1] Support partiel, animation-fill-mode n'est pas prise en charge par le navigateur Android avant 2.3.
[2] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.
[3] Cf. les notes de version d'Opera 12.50.