W3docs
fr
Se connecter

Propriété CSS animation-name

Utilisez animation-name pour nommer les animations @keyframes à appliquer à un élément. Découvrez des exemples pratiques.

La propriété animation-name nomme une ou plusieurs animations @keyframes à appliquer à un élément. La valeur est l'identifiant que vous avez donné à une règle @keyframes — ce nom est ce qui relie l'élément à son animation. Sans animation-name, le navigateur n'a aucune image-clé à exécuter, donc rien n'est animé même si vous définissez une durée.

Cette propriété pointe uniquement vers l'animation ; elle ne la démarre pas seule. Vous avez toujours besoin d'une valeur non nulle pour animation-duration afin que les images-clés soient jouées. animation-name fait partie des propriétés CSS3.

En pratique, vous écrivez rarement animation-name manuellement — le raccourci animation définit le nom, la durée, la fonction de temporisation, le délai, le nombre d'itérations, la direction et bien plus en une seule déclaration. Utilisez la forme longue lorsque vous souhaitez remplacer uniquement le nom (par exemple, changer les images-clés au survol tout en conservant le même timing).

Quand l'utiliser

  • Réutiliser un ensemble d'images-clés sur plusieurs éléments avec des durées ou des délais différents, en définissant animation-name une fois et en variant les autres propriétés longues.
  • Changer d'animation selon l'état — donner à un élément un nom normalement et un nom différent au :hover ou lors d'un basculement de classe.
  • Exécuter plusieurs animations simultanément sur le même élément en listant des noms séparés par des virgules (voir Animations multiples ci-dessous).

Règles de nommage

Un nom d'images-clés est un identifiant CSS, donc les mêmes règles s'appliquent :

  • Il est sensible à la casse : Slide et slide sont des noms différents.
  • Il peut contenir des lettres, des chiffres, des tirets et des traits de soulignement, mais ne peut pas commencer par un chiffre.
  • Évitez les mots-clés CSS généraux none, initial, inherit et unset comme noms d'animations — animation-name: none est interprété comme « aucune animation », et non comme un bloc d'images-clés littéralement nommé none.
Valeur initialenone
S'applique àTous les éléments. S'applique également aux pseudo-éléments ::before et ::after.
HéritéNon.
AnimableNon.
VersionCSS3
Syntaxe DOMobject.style.animationName = "element";

Syntaxe

Syntaxe de la propriété CSS animation-name

animation-name: keyframename | none | initial | inherit;

Vous pouvez fournir plusieurs noms, séparés par des virgules, pour appliquer plusieurs animations au même élément :

animation-name: slide, fade;

Exemple de la propriété animation-name

Exemple de la propriété CSS animation-name

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation-name: element;
        animation-duration: 4s;
        animation-iteration-count: infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>
Essayez vous-même »
Info

Dans l'exemple donné, le nom de l'animation est défini sur « element ». Vous pouvez choisir n'importe quel nom, à condition qu'une règle @keyframes element correspondante existe. Si le nom n'a pas de règle @keyframes correspondante, la déclaration est simplement ignorée et rien n'est animé.

Animations multiples

Lorsque vous listez plusieurs noms, chacun est associé positionnellement aux valeurs des autres propriétés longues d'animation. Ici, slide reçoit 2s/ease-out et fade reçoit 4s/linear :

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        padding: 20px;
        background: #1c87c9;
        color: #fff;
        animation-name: slide, fade;
        animation-duration: 2s, 4s;
        animation-timing-function: ease-out, linear;
        animation-iteration-count: infinite;
      }
      @keyframes slide {
        from { transform: translateX(0); }
        to   { transform: translateX(150px); }
      }
      @keyframes fade {
        from { opacity: 1; }
        to   { opacity: 0.2; }
      }
    </style>
  </head>
  <body>
    <div>Sliding and fading at the same time.</div>
  </body>
</html>

Si vous fournissez moins de valeurs pour une autre propriété qu'il n'y a de noms, les valeurs se répètent pour couvrir chaque nom. Pour un contrôle plus précis du reste de l'animation, consultez animation-delay et animation-direction.

Valeurs

ValeurDescription
noneValeur par défaut. Indique qu'il n'y aura aucune animation.
keyframenameSpécifie le nom de l'animation.
initialForce la propriété à utiliser sa valeur par défaut.
inheritHérite la propriété de son élément parent.

Pratique

Pratique
Que fait la propriété CSS animation-name ?
Que fait la propriété CSS animation-name ?
Was this page helpful?