animation-name
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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 des propriétés pour la séquence.
Exemple interactif
Généralement, on pourra utiliser la propriété raccourcie animation
pour définir l'ensemble des propriétés liées aux animations.
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
etz
, de nombres entre0
et9
, 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 êtreunset
,initial
,inherit
ou une combinaison analogue avec une casse différente.
Note :
Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété animation-*
, selon leur quantité, elles seront différemment affectées aux animations définies par animation-name
. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.
Définition formelle
Valeur initiale | none |
---|---|
Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | Not animatable |
Syntaxe formelle
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
Specification |
---|
CSS Animations Level 1 # animation-name |
Compatibilité des navigateurs
BCD tables only load in the browser