Maison > Article > interface Web > Partager un exemple de surveillance d'un événement de fin d'animation CSS3
Lorsque l'animation CSS3 termine une animation, nous voulons garder l'animation dans l'état terminé ou dans un autre événement. Que devons-nous faire ?
On peut écouter l'événement webkitAnimationEnd
// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { console.log("动画结束"); })
-webkit-animation animation a trois événements :
Événement de début : webkitAnimationStart
Événement de fin : webkitAnimationEnd
Événement de mouvement répété : webkitAnimationIteration
// 动画开始时事件o.addEventListener("webkitAnimationStart", function() { console.log("动画开始"); })// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() { console.log("动画重复运动"); })// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { console.log("动画结束"); })
Exemple :
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>webkitAnimationEnd</title><style type="text/css">#p1{ margin: 200px auto 0; width: 200px; height: 200px; color: #fff; background-color: #000; -webkit-animation: transform 3s 2 ease;}@-webkit-keyframes transform { 0%{ -webkit-transform: scale(1) rotate(50deg); } 30%{ -webkit-transform: scale(2) rotate(100deg); } 6%{ -webkit-transform: scale(0.5) rotate(-100deg); } 100%{ -webkit-transform: scale(1) rotate(0); }}</style></head><body><p id="p1"></p><script type="text/javascript">var o = document.getElementById("p1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() { alert("动画开始"); })// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() { alert("动画重复运动"); })// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { this.className = ""; alert("动画结束"); })</script></body></html>
Transition d'attribut de transition CSS3, à la fin de animation Il existe également un événement de fin : webkitTransitionEnd
Remarque : il n'y a qu'un seul événement pour la transition
[Recommandations associées]
1. > Introduction détaillée à l'attribut animation-direction en CSS3
28 attributs majeurs de l'animation CSS3 (Animation) qu'il faut maîtriser
3. 🎜>Utiliser l'animation Exemple de tutoriel sur l'exécution différée entre les boucles à l'aide d'attributs Explication détaillée des deux méthodes de pause (transition, animation) en CSS3Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!