animation-name

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété animation-name définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ @keyframes qui définit les valeurs es propriétés pour la séquence.

Généralement, on pourra utiliser la propriété raccourcie animation pour définir l'ensemble des propriétés liées aux animations.

Valeur initiale	`none`
Applicabilité	tous les éléments, ainsi que les pseudo-elements `::before` et `::after`
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Animable	non
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeur avec un mot-clé */
animation-name: none;

/* Valeur utilisant un identifiant */
animation-name: test_05;

/* Gestion de plusieurs animations */
animation-name: test1, animation4;

/*  Valeurs globales * /
animation-name: initial
animation-name: inherit
animation-name: unset

Valeurs

none: Un mot-clé qui indique qu'aucune étape (keyframe) ne sera utilisée. Il peut être utilisée pour désactiver une animation sans changer l'ordre des autres identifiants ou afin de désactiver les animations provenant de la cascade.
<custom-ident>: Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre a et z, de nombres entre 0 et 9, de tirets bas (_) et/ou de tirets (-). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être unset, initial, inherit ou une combinaison analogue avec une casse différente.

Syntaxe formelle

<single-animation-name>#où 
<single-animation-name> = none | IDENT

Exemples

CSS

p {
  animation-duration: 3s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}
@keyframes glissement {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

HTML

<p>
  La Chenille et Alice se considérèrent un instant en silence.
  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
  la parole d’une voix endormie et traînante.
</p>

Résultat

Spécifications

Spécification	État	Commentaires
CSS Animations La définition de 'animation-name' dans cette spécification.	Version de travail	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	(Oui)-webkit 43.0	5.0 (5.0)-moz 16.0 (16.0)^[1]	10	12 -o 12.10	4.0-webkit

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome pour Android
Support simple	?	?	?	?	?	?

[1] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

animation-name

Syntaxe

Valeurs

Syntaxe formelle

Exemples

CSS

HTML

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Étiquettes et contributeurs liés au document