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 :

CSS - Directive @keyframes

@keyframes est la pierre angulaire des animations en CSS. Elle définit les différentes étapes d'une animation, quelles sont les propriétés (dimensions, couleur...) qui doivent varier, et entre quelles limites.

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.

Syntaxe de @keyframes.

  • @keyframes demo { étape1 {prop1:valeur; prop2:valeur;...} étape2 {prop1:valeur; prop2:valeur;...} étapeN {prop1:valeur; prop2:valeur;...} }

    Le nom choisi pour l'animation vient tout de suite après le mot @keyframes.

    Chacune des étapes peut être introduite par un pourcentage ou par les mots from (équivalent à 0%) et to (équivalent à 100%).
    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.

    Le nom choisi pour l'animation n'est pas sensible à la casse mais il doit respecter certaines règles :

      - 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é.

Exemples.

Les animations utilisées dans les exemples ci-dessous sont les suivantes. Le troisième exemple combine les deux animations : la première sur le bloc carré, et la deuxième sur la puce bleue.

Deux animations ont été définies : une simple rotation, et un parcours autour d'un périmètre carré. Le troisième exemple combine ces deux animations.

Cliquez sur les éléments mobiles pour afficher ou masquer leur code CSS.

Animation avec @keyframes
Animation avec @keyframes

Voir aussi...

Animation - Propriétés.

Animation - Fonctions.

  • cubic-bezier() : Détermine une progression non linéaire pour les animations.
  • steps() : Définit une animation saccadée, pas par pas.