Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

@keyframes

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 règle @ @keyframes permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on obtient lorsque le navigateur gère l'ensemble, du début à la fin, automatiquement.

Il est possible de manipuler la règle @ @keyframes via le CSSOM et notamment avec l'interface CSSKeyframesRule.

Afin d'utiliser ces règles, on créera une règle @keyframes avec un nom pour chaque étape et on utilisera ce nom avec la propriété animation-name afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle @keyframes contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..

Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.

Validité de la liste des étapes

Afin qu'une liste d'étapes soit valide, il faut a minima décrire des étapes pour l'avancement 0% (ou from) et 100% (ou to) (qui définissent respectivement le début et la fin de l'animation). Si aucune de ces étapes n'est définie, la déclaration est invalide et sera ignorée par l'analyseur.

Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.

Résolution des doublons

Si plusieurs règles @keyframes existent avec le même nom, c'est la dernière qui est utilisée. Les règles @keyframes ne forment pass de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.

Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.

Gestion des propriétés absentes

Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

Ici, la propriété top est animée en passant par les étapes 0%, 30% et 100%. Quant à left, elle est animée aux étapes 0%, 68% et 100%.

Seules les propriétés qui sont définies sur les étapes de début (0%) et de fin (100%) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.

!important dans une étape

Les déclarations qui utilisent !important dans une description d'étape sont ignorées

@keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* ignorée */
  to   { margin-top: 100px; }
}

@keyframes important2 {
  from { margin-top: 50px;
         margin-bottom: 100px; }
  to   { margin-top: 150px !important; /* ignorée */
         margin-bottom: 50px; }
}

Syntaxe

Valeurs

<identifier>
Un nom qui permet d'identifier la liste d'étapes. Cela doit être un identifiant valide selon la syntaxe CSS.
from
Indique le point de départ de l'animation (correspond à un avancement de 0%).
to
Indique la fin de l'animation (correspond à un avancement de 100%).
<percentage>
Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.

Syntaxe formelle

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

Exemples

CSS

p {
  animation-duration: 25s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

  to {
    margin-left: 0%;
    width: 100%;
  }
}

HTML

<p>
  Le Chat grimaça en apercevant Alice. Elle trouva qu’il
  avait l’air bon enfant, et cependant il avait de
  très longues griffes et une grande rangée de dents ; 
  aussi comprit-elle qu’il fallait le traiter avec
  respect.
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Animations
La définition de '@keyframes' 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)[1]
10 12 -o
12.10
4.0-webkit
Ne tient pas compte des déclarations !important ? 19 (19) ? ? ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple (Oui)-webkit 5.0 (5.0)-moz
16.0 (16.0)[1]
? ? ?
Ne tient pas compte des déclarations !important ? 19.0 (19) ? ? ?

[1] Dans Firefox, @keyframes n'est pas gérée pour les feuilles de style en ligne (inline) ou les feuilles de style avec portée  (bug 830056).

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, fscholz, Sheppy, teoli, LaChouette
 Dernière mise à jour par : SphinxKnight,