Exemple
Faire quelque chose avec un <div> élément lors d' une animation CSS a commencé:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari
and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
//
Standard syntax
x.addEventListener("animationstart", myStartFunction);
Essayez vous - même » Définition et utilisation
L'événement animationstart se produit lorsqu'une animation CSS a commencé à jouer.
Pour plus d' informations sur CSS Animations, consultez notre tutoriel sur animations CSS3 .
Quand une animation CSS joue, il y a trois événements qui peuvent se produire:
- animationstart - se produit lorsque l'animation CSS a commencé
- animationiteration - se produit lorsque l'animation CSS est répété
- animationend - se produit lorsque l'animation CSS a terminé
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement l'événement.
Les chiffres suivis par "webkit" ou "moz" précisent la première version qui a travaillé avec un préfixe.
un événement | |||||
---|---|---|---|---|---|
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 le préfixe webkitAnimationStart.
Syntaxe
object.addEventListener("webkitAnimationStart", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationstart", myScript );
// Standard syntax
Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
Bulles: | Oui |
---|---|
cancelable: | Non |
Type d'événement: | AnimationEvent |
DOM Version: | Niveau 3 Évènements |
Pages associées
Tutoriel CSS: CSS3 Animations
CSS Référence: CSS3 animation Property
Référence HTML DOM: Style animation Property
<Object Event