animation-name - Propriété CSS
Résumé des caractéristiques de la propriété animation-name
none
none
animation-name
ne peut pas être animée.Description.
Définit quelle animation est à appliquer à l'élément.
L'animation doit avoir été définie par une directive @keyframes
.
Plusieurs animations peuvent être énumérées en les séparant par des virgules.
Pour plusieurs d'informations sur les animations multiples, reportez-vous à la page
animation
.
Pour une présentation générale des animations, reportez-vous à la page animation
.
Syntaxes pour animation-name
.
n
est le nom d'une animation définie par une directive @keyframes
.
animation-name:
;
- animation-name: none;
Valeur par défaut. Aucune animation n'est associée à l'élément.
Cette valeur peut être utilisée pour désactiver une animation définie ailleurs dans la cascade des styles. - animation-name: nom-animation;
L'animation nommée 'nom-animation' est associée à l'élément. Elle sera jouée si une durée est également définie.
Ce nom doit correspondre à une déclaration@keyframes
existante. Par exemple :@keyframes nom-animation { from {...} to {...} }
- animation-name: animation1, animation2, ...;
Plusieurs animations sont associées à l'élément. Elle seront jouées simultanément.
Pour une explication détaillée sur les animations multiples, consultez la pageanimation
. - animation-name:
initial
; animation-name:inherit
; animation-name:revert
; animation-name:revert-layer
; animation-name:unset
;La valeur initiale est :
.none
Animation de la propriété animation-name
elle-même.
La propriété animation-name
elle-même ne peut pas être animée. C'est le cas de toutes les autres propriétés qui définissent un paramètre des animations.
Manipulation de la propriété animation-name
par programme.
L'élément utilisé pour ces exemples de programmes, noté el
dans les codes, est visible ci-dessous. Il est au départ animé d'une
rotation.
Modifier la valeur de animation-name
en Javascript.
En Javascript, voici comment modifier la valeur de animation-name
, ce qui bien sûr changera l'animation : on passera d'une rotation à
une translation.
Deux syntaxes sont possibles en Javascript : la première avec le nom de la propriété écrit en kebab-case
(un tiret pour séparer les mots),
et la deuxième avec l'écriture en camel-case
(une majuscule pour séparer les mots).
function setAnimationName(el) {
el.style['animation-name']='translation1';
// ou
el.style.animationName='translation1';
}
Lire en Javascript la valeur de animation-name
.
La propriété animation-name
doit avoir été initialisée directement sur l'élément lui-même, avec l'attribut style
du HTML.
function getAnimationName(el) {
alert(el.style['animation-name']);
// ou
alert(el.style.animationName);
}
Lire la valeur calculée de animation-name
en Javascript.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages.
function getCalcAnimationName(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation-name'));
}
Modifier la valeur de la propriété animation-name
avec JQuery.
Le code ci-après, en JQuery, définit la propriété animation-name
à rotation1
.
function setAnimationName(el) {
$(el).css('animation-name','rotation1');
// ou
$(el).css('animationName','rotation1');
}
Lire la valeur calculée de la propriété animation-name
avec JQuery.
La lecture de la valeur calculées d'une propriété peut se faire avec les codes suivants (deux variantes).
function getCalcAnimationName(el) {
alert($(el).css('animation-name'));
// ou
alert($(el).css('animationName'));
}
Simulateur.
Plusieurs animations ont été définies par des directives successives. Ce simulateur permet d'appliquer l'une ou l'autre à l'élément
ci-dessous.
Remarque : pour que l'animation soit déclenchée à coup sûr il faut repasser par la valeur none
avant de sélectionner une nouvelle valeur.
Prise en charge par les navigateurs (compatibilité).
animation-name
.
animation-name
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que animation-name
.
Les spécifications CSS éditées par le W3C sont organisées en modules. animation-name
fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.