@keyframes - Directive CSS

Description de la directive @keyframes..

@keyframes définit le nom et les paramètres d'une animation : quelle(s) propriété(s) CSS sont animée(s), les étapes de l'animation, etc.

L'animation définie par @keyframes sera ensuite affectée à un élément par les propriétés CSS animation ou animation-name.

Si deux animations sont définies avec le même nom, c'est la dernière qui est prise en compte : pas de règles de priorité en cascade comme pour les propriétés. Ce qui est logique puisque aucun sélecteur ne figure dans la syntaxe de @keyframes.

Pour une présentation plus générale des animations en CSS, reportez-vous à la page sur la propriété animation.

Syntaxes de la directive @keyframes.

• @keyframes demo { from {prop1:valeur; prop2:valeur;...} 30% {prop1:valeur; prop2:valeur;...} ... to {prop1:valeur; prop2:valeur;...} }

  Le nom choisi pour l'animation vient tout de suite après le mot @keyframes. Dans cet exemple le nom choisi est demo. Il doit respecter les règles suivantes :

  • Le nom peut éventuellement être spécifié entre guillemets, mais ce n'est pas obligatoire.
  • La casse est prise en compte. Il est conseillé d'adopter une convention de nommage telle que le "kebab case" pour rester homogène avec la syntaxe habituelle de CSS : tout en minucules avec un tiret entre les mots. Exemples : animation-menu, rotation-logo, etc.
  • Il ne doit pas comporter d'espace. Le seuls caractères autorisés sont les lettres, les chiffres, le tiret et le tiret souligné.
  • Il ne doit pas commencer par un double-tiret.
  • Le nom ne doit pas être inherit, unset, ni initial. En fait il est conseillé d'éviter tout nom qui aurait une signification en CSS ne serait-ce que pour des raisons de lisibilité.

  Chacune des étapes de l'animation peut être introduite par un pourcentage ou par les mots from (équivalent à 0%) et to (équivalent à 100%).
  Notez que le signe % est nécessaire même avec la valeur 0%.

  Si seulement l'étape from ou 0% est définie, le navigateur termine l'animation sur les valeurs actuelles des propriétés. De même s'il n'y a que l'étape finale qui est définie (to ou 100%), le navigateur commence l'animation avec les valeurs actuelles des propriétés.

  Les propriétés sur lesquelles porte l'animation peuvent être la plupart des propriétés CSS qui acceptent des valeurs numériques ou des couleurs. Les propriétés qui n'acceptent que des valeurs discrètes (comme float, font-family, etc.) peuvent cependent être animées mais la transition se fera de façon brutale entre la valeur de départ et la valeur de fin. Quelques rares propriétés ne sont pas animables, c'est à dire ignorées si elles sont citées dans la directive @keyframes.

  Si une des propriétés citées dans l'animation est par ailleurs définie avec !important, l'animation n'est pas traitée sur cette propriété.

• @keyframes demo { from { prop1:valeur; prop2:valeur; animation-timing-function: linear; } 30% { prop1:valeur; prop2:valeur; animation-timing-function: ease-out; } ... to { prop1:valeur; prop2:valeur; } }

  Dans ce deuxième exemple de syntaxe, animation-timing-function définit la dynamique de l'animation pour chacune des étapes. Cette dynamique sera utilisée jusqu'à l'étape suivante.
  Sur la dernière étape (to ou 100%), animation-timing-function est ignoré.

  Reportez vous à la propriété animation-timing-function pour plus de précisions sur cette notion de dynamique.

Exemples d'utilisation de la directive @keyframes.

Deux animations ont été définies :

• Une simple rotation, appliquée sur le bloc carré.
• Un parcours autour d'un périmètre carré, appliqué à la puce bleue.

Le troisième exemple combine ces deux animations.

Enfin, voici un autre exemple utilisant des dynamiques différentes pour chacune des étapes de l'animation : la première étape (agrandissement) se fait par saccades, tandis que le rétrécissement se fait de façon linéaire.

Manipulations de la directive @keyframes par programme.

Utilisation de Javascript pour ajouter une directive @keyframes.

Le principe est de créer un élément style dans la section head. Le code CSS correspondant à la définition de @keyframes est inséré dans ce nouvel élément.
Les deux premières lignes de notre exemple Javascript suppriment, si nécessaire, un élément style créé par une exécution précédente du code.

let oldStyle=document.getElementById('style1'); try{document.head.removeChild(oldStyle);} catch(e){} const newStyle = document.createElement('style'); newStyle.id='style1'; newStyle.innerHTML = '@keyframes demo {from {color:red;} to {color:blue;}}'; document.head.appendChild(newStyle);

Et avec JQuery.

$('#style1').remove(); $('<style>', { id: 'style1', html: '@keyframes demo {from {color:red;} to {color:blue;}}' }).appendTo('head');

Compatibilité des navigateurs avec la directive @keyframes.

Les animations CSS, et donc la directive @keyframes, sont maintenant bien reconnues par les navigateurs.

1

Support des
animations

2

Directive
@keyframes

Estimation de la prise en charge globale.

97%

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la directive @keyframes.

• Module CSS - Animations Niveau 1

  Première présentation des animations en CSS.
  Introduction de la directive @keyframes.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Pas de changement concernant la directive @keyframes.
  

  02 Mars 2023

  Document de travail.

  

  

  

Voir aussi, au sujet des animations.

Tout ce qui concerne les animations est décrit dans la spécification "Module CSS - Animations" (CSS Animations).
Voici une liste des principaux termes présentés dans ce module de spécification :

Propriétés :