Événement animationstart

Définition et utilisation

L'événement animationstart se produit lorsque l'animation CSS commence à jouer.

Pour en savoir plus sur les animations CSS, apprenez nos Tutoriel d'animation CSS3.

Trois événements peuvent se produire pendant que l'animation CSS est jouée :

Exemple

Faites quelque chose au moment où l'animation CSS commence pour l'élément <div> :

var x = document.getElementById("myDIV");
// Code pour Chrome, Safari et Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Syntaxe standard
x.addEventListener("animationstart", myStartFunction);

Essayez-le vous-même

Syntaxe

object.addEventListener("webkitAnimationStart", myScript);  // Code pour Chrome, Safari et Opera
object.addEventListener("animationstart", myScript);        // Syntaxe standard

Remarque :Internet Explorer 8 et versions antérieures ne prennent pas en charge Méthode addEventListener().

Détails techniques

Bubbling : Pris en charge
Annulable : Non pris en charge
Type d'événement : AnimationEvent
Version DOM : Événements de niveau 3

Support du navigateur

Les chiffres dans le tableau indiquent la première version du navigateur qui prend en charge complètement cet événement.

Le "webkit" ou "moz" après le chiffre indique la première version du préfixe utilisé.

Événement Chrome IE Firefox Safari Opera
animationstart 4.0 webkit 10.0 16.0
5.0 moz
4.0 webkit 15.0 webkit
12.1

Remarque :Pour Chrome, Safari et Opera, utilisez webkitAnimationEnd.

Pages associées

Tutoriel CSS :Animation CSS3

Guide de référence CSS :Attribut animation CSS3

Guide de référence DOM HTML:Attribut animation Style