Animation-name - Propriété CSS

Schéma de la syntaxe de animation-name.

Description des termes utilisés sur le schéma :

• name est le nom d'une animation définie par une directive @keyframes.
• Si plusieurs animations sont déclarées, autant de valeurs peuvent être indiquées en les séparant par des virgules.

Description de la propriété animation-name.

animation-name 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 sur les animations multiples.

Pour une présentation générale des animations, reportez-vous à la page animations en CSS.

Valeurs pour 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: animation1;

  L'animation nommée 'animation1' 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 animation1 { 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 animations multiples.

• animation-name: initial; (none) animation-name: inherit; animation-name: revert; animation-name: revertLayer; animation-name: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de animation-name.

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.

Accéder à la propriété animation-name par programme.

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

let el = document.getElementById('id'); el.style['animation-name'] = 'translation1'; // ou let el = document.getElementById('id'); 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.

let el = document.getElementById('id'); let value = el.style['animation-name']; // ou let el = document.getElementById('id'); let value = 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. A défaut ce sera la valeur initiale de la propriété (none dans le cas de animation-name) mais la valeur calculée est toujours égale à quelque chose.

let el = document.getElementById('id'); let value = 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 à translation1.


$('#id').css('animation-name', 'translation1');
// ou
$('#id').css('animationName', 'translation1');


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 le code suivant.

let value = $('#id').css('animation-name');

Autres exemples de code.

Trouvez d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété animation-name et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de animation-name cela ne fera pas de différences.

Exemple interactif avec la propriété animation-name.

Plusieurs animations ont été définies par des directives @keyframes 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 éventuellement repasser par la valeur none avant de sélectionner une nouvelle valeur.

Compatibilité des navigateurs avec animation-name.

La propriété animation-name est correctement prise en charge par les navigateurs actuels.

1

Support des
animations

2

Propriété
animation-name

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété animation-name.

• Module CSS - Animations Niveau 1

  Introduction des animations en CSS. Définition initiale de la propriété animation-name.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Pas de changement concernant animation-name.
  

  02 Mars 2023

  Document de travail.

  

  

  

Voir aussi, au sujet des animations.

La norme CSS définie par le W3C est organisée en modules. Le module CSS Animations décrit tout ce qui est en rapport avec les animations.

Propriétés :

Directives :