@keyframes

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

Compatibilité des navigateurs

[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

• Manipuler les animations CSS
• AnimationEvent