Propriété CSS animation-name

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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.