Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

@keyframes - Directive CSS

@keyframes

Résumé des caractéristiques de la directive @keyframes

Description rapide
Définit le nom et les paramètres d'une animation.
Statut
Standard
Module W3C
Module CSS - Animations
Références (W3C)
 🡇  
 🡅  
Statut du document:: ED (brouillon des éditeurs)

Statut du document:: WD (document de travail)

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.

Syntaxe de @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%).
    Natez que le signe % est nécessaire même avec 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.

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.

Animation avec @keyframes
Animation avec @keyframes

 

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.

Prise en charge par les navigateurs (compatibilité).

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

Colonne 1
Capacité à gérer les animations, maintenant possibles sur tous les navigateurs.
Colonne 2
Prise en charge de la directive @keyframes permettant de définir les propriétés concernées par une animation.
1
Animations
2
@keyframes
Estimation de la prise en charge en pourcentage du parc actuel.
98%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que @keyframes.

Les spécifications CSS éditées par le W3C sont organisées en modules. @keyframes fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Paramètres d'animation.
Définit comment interagissent plusieurs animations appliquées à la même propriété.
Temps d'attente avant le démarrage de l'animation.
Sens de l'animation (normal ou inverse).
Définit la durée totale de l'animation.
Style de remplacement lorsque l'animation n'est pas en cours.
Définit le nombre de fois qu'une animation doit être jouée.
Définit l'animation à appliquer à l'élément.
État de l'animation (en cours ou en pause).
Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
Définit la fonction d'accélération à utiliser pendant une animation.