@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 segments 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 les animations en CSS. Et également aux propriétés suivantes, qui sont le strict minimum pour réaliser une 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 ou apostrophes, 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 minuscules 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 deux pourcentages sont identiques, c'est le dernier qui est pris en compte, mais la directive @keyframes n'est pas invalide.

  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 cependant ê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 peuvent pas être animées, 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é. Et d'autre part, le mot !important est interdit dans la directive @keyframes : la propriété correspondante est ignorée.

• @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 chacun des segments. Cette dynamique sera utilisée jusqu'au segment suivant.
  Sur le dernier segment (to ou 100%), animation-timing-function est ignoré, même s'il est précisé.

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

Exemples d'animation.

Appliquer plusieurs animations sur des éléments.

Sur cet exemple, 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. Notez qu'il y a une autre façon de combiner plusieurs animations : c'est de les appliquer sur le même élément. Voyez à ce sujet la propriété animation-composition.

Utilisation de animation-timing-function dans @keyframes.

Enfin, voici un autre exemple utilisant des dynamiques différentes pour chacune des étapes de l'animation : la première étape (agrandissement de 0% à 50%) se fait par saccades, tandis que le rétrécissement (de 50% à 100% 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 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

  Cette spécification introduit les changements de valeurs de propriétés au fil du temps. Les animations sont semblables aux transitions mais elles n'ont pas besoin d'un événement extérieur pour s'exécuter (code Javascript, action de l'utilisateur, etc.). Les différentes étape de l'animations sont contrôlées par une directive @keyframes.
  De nombreux paramètres peuvent être ajustés au moment d'appliquer une animation : nombre de répétitions, durée, l'animation inverse-t-elle son début et sa fin ou non, etc. Chacun de ces paramètres correspondant à une propriété.

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

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Ce niveau 2 de la spécification introduit surtout les animations pilotées par un défilement. Celles-ci sont décrites dans un module séparés mais il y a nécessairement des interactions avec le module animation. En particulier la propriété animation-timeline est introduite.
  Une autre propriété est ajoutée : animation-composition qui définit comment des animations se combinent lorsqu'elles sont appliquées à un même élément.

  Concernant @keyframes. 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" (Module CSS - Animations).
Voici une liste des principaux termes présentés dans ce module de spécification :

Propriétés :

Directives :