Heim >Web-Frontend >CSS-Tutorial >Teilen Sie ein Beispiel für die Überwachung des Endereignisses einer CSS3-Animation
Teilen Sie ein Beispiel für die Überwachung des Endereignisses einer CSS3-Animation
- 零下一度Original
- 2017-05-18 14:29:275234Durchsuche
Wenn die CSS3-Animation eine Animation abschließt, möchten wir die Animation im beendeten Zustand oder in einem anderen Ereignis halten. Was sollen wir tun?
Wir können uns das webkitAnimationEnd-Ereignis anhören
// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})-webkit-animation Animation hat drei Ereignisse:
Startereignis: webkitAnimationStart
Endereignis: webkitAnimationEnd
Bewegungsereignis wiederholen: webkitAnimationIteration
// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
console.log("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
console.log("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})Beispiel:
<!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>CSS3-Übergangsattributübergang, am Ende von Animation Es gibt auch ein Endereignis: webkitTransitionEnd
Hinweis: Es gibt nur ein Ereignis für den Übergang
[Verwandte Empfehlungen]
1 > Detaillierte Einführung in das Animationsrichtungsattribut in CSS3
8 Hauptattribute der CSS3-Animation (Animation), die beherrscht werden müssen3 🎜>Animation verwenden Beispiel-Tutorial zur verzögerten Ausführung zwischen Schleifen mithilfe von Attributen
4. Detaillierte Erläuterung der beiden Pausenmethoden (Übergang, Animation) in CSS3
Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel für die Überwachung des Endereignisses einer CSS3-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!