Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

animation-name - Propriété CSS

animation-name

Résumé des caractéristiques de la propriété animation-name

Description rapide
Définit l'animation à appliquer à l'élément.
Statut
Standard
Type de valeur
Id
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Not animatable : la propriété animation-name ne peut pas être animée.
Module W3C
Module CSS - Animations
Références (W3C)
 🡇  
 🡅  
Statut du document:: ED (brouillon des éditeurs)

Statut du document:: WD (document de travail)

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:
Schéma syntaxique de la propriété animation-nameSyntaxe de animation-name : propriété CSS pour définir les animations. none none n n , ,
;
  • 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 page animation.

  • 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.

animation-name :
Résultat

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Support général des animations en CSS. Tous les navigateurs actuels prennent en charge les animations.
Colonne 2
Prise en charge par les navigateurs de la propriété CSS animation-name.
1
Animations
2
animation-name
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

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.

Propriétés.

Paramètres d'animation.
Définit comment interagissent plusieurs animations appliquées à la même propriété.
Temps d'attente avant le démarrage de l'animation.
Sens de l'animation (normal ou inverse).
Définit la durée totale de l'animation.
Style de remplacement lorsque l'animation n'est pas en cours.
Définit le nombre de fois qu'une animation doit être jouée.
État de l'animation (en cours ou en pause).
Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
Définit la fonction d'accélération à utiliser pendant une animation.

Directives.

Définit le nom et les paramètres d'une animation.