événement de démarrage d'animation
animationstartÉvénement
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
margin: 25px;
width: 550px;
height: 100px;
background: orange;
position: relative;
font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<div id="myDIV" onclick="myFunction()">点我开始动画</div>
<script>
var x = document.getElementById("myDIV")
// 使用 JavaScript 开始动画
function myFunction() {
x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码
x.style.animation = "mymove 4s 2";
}
// Chrome, Safari 和 Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart 事件触发 - 动画已经开始";
this.style.backgroundColor = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend 事件触发 - 动画已经完成";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez Bouton "Exécuter l'instance" pour afficher l'instance en ligne
Définition et utilisation
L'événement animationstart est déclenché lorsque l'animation CSS commence à jouer.
Pour plus d'informations sur les animations CSS, consultez notre chapitre Animations CSS3.
Lorsque l'animation CSS est jouée, les trois événements suivants se produiront :
- animationstart - déclenché lorsque l'animation CSS démarre
- animationiteration - déclenché lorsque l'animation CSS est joué à plusieurs reprises
- animationend - déclenché une fois l'animation CSS terminée
Prise en charge du navigateur
Le numéro dans le tableau indique le numéro de version du premier navigateur qui soutient cet événement.
Le numéro spécifié après "webkit" ou "moz" est le préfixe du premier numéro de version qui prend en charge cet événement.
| Événement |
| ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| animationstart | kit web 4.0 | 10.0 | 16.0 5.0 moz | kit web 4.0 | Webkit 15.012.1 |
Remarque :
object Utilisé par les navigateurs Chrome, Safari et Opera
Préfixe webkitAnimationEnd. Grammaire
object.addEventListener("webkitAnimationStart", monScript
); // Code pour Chrome, Safari et Opera
object.addEventListener("webkitAnimationStart", monScript
); // Code pour Chrome, Safari et Opera
.addEventListener("animationstart", myScript); // Syntaxe standard
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | No |
| 事件类型: | AnimationEvent |
Remarque :
Internet Explorer 8 et les versions antérieures d'IE ne prennent pas en charge la méthode addEventListener().
Détails techniques
Pages associées
Tutoriel CSS : Animation CSS3
