Propriété CSS animation-name

La propriété CSS animation-name définit le nom du règle @keyframes que vous voulez appliquer. Elle a deux valeurs: none et keyframename. None est la valeur initiale qui spécifie qu'il n'y aura pas aucune animation. Keyframename spécifie le nom de l'animation.

Valeur initiale none
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::before et ::after
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.animationName = "element";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      padding: 50px;
      animation: element 4s infinite;
      }
      @keyframes  element {
      0% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      100% { background-color: #d5dce8; }
      }
    </style>
  </head>
  <body>
    <h2>Exemple de animation-name</h2>
    <div>Le nom de l'animation est défini comme "element".</div>
  </body>
</html>
Dans l'exemple donné, le nom de l'animation est défini comme "element". Vous pouvez choisir n'importe quel nom.

Valeurs

Valeur Description
none La valeur par défaut, qui spécifie qu'il n'y aura pas aucune animation.
keyframename Spécifie le nom de l'animation.
initial Cela fait la propriété utiliser sa valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-


Trouvez-vous cela utile?

Articles Associées