Propriété animation-name de CSS

La propriété animation-name spécifie un ou plusieurs noms d'animations définis par la règle @keyframes qui doivent être appliqués à l'élément sélectionné. Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour une propriété d'animation, elles seront associées aux animations définies dans animation-name de manière différente.

La propriété animation-name est l'une des propriétés CSS3.

La propriété raccourcie animation peut être utilisée pour définir toutes les propriétés d'animation en une seule fois. Différentes propriétés d'animation peuvent contrôler l'animation. Elles peuvent spécifier la durée d'itération de l'animation, si l'animation doit être en lecture ou en pause, et si elle alterne entre les valeurs. Le temps de début de l'animation peut également être retardé.

Valeur initiale	none
S'applique à	Tous les éléments. S'applique également aux pseudo-éléments ::before et ::after.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.animationName = "element";

Syntaxe

Syntaxe de la propriété animation-name de CSS

css

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

Exemple de la propriété animation-name :

Exemple de la propriété animation-name de CSS

html

<!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>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>

Try it Yourself »

INFO

Dans l'exemple donné, le nom de l'animation est défini sur "element". Vous pouvez choisir n'importe quel nom.

Valeurs

Valeur	Description
none	Cette valeur est la valeur par défaut. Spécifie qu'aucune animation ne sera appliquée.
keyframename	Spécifie le nom de l'animation.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de l'élément parent.

Pratique

Que fait la propriété CSS animation-name ?

Définit le nom de l'animation @keyframes.Modifie la couleur d'un élément.Définit la vitesse de l'animation.Lie l'animation à l'élément.Redimensionne l'élément en fonction de la taille de l'écran.

Propriété animation-name de CSS ​

Syntaxe ​

Exemple de la propriété animation-name : ​

Valeurs ​

Pratique ​

Propriété animation-name de CSS

Syntaxe

Exemple de la propriété animation-name :

Valeurs

Pratique