CSS3 애니메이션 종료 이벤트 모니터링 예시 공유
- 零下一度원래의
- 2017-05-18 14:29:275203검색
CSS3 애니메이션이 애니메이션을 완료할 때 애니메이션이 종료된 상태로 유지되기를 원하거나 다른 이벤트를 어떻게 해야 합니까?
webkitAnimationEnd 이벤트를 들을 수 있습니다
// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})-webkit-animation animation에는 세 가지 이벤트가 있습니다:
시작 이벤트: webkitAnimationStart
끝 이벤트: webkitAnimationEnd
반복 모션 이벤트: webkitAnimationIteration
// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
console.log("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
console.log("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})예:
<!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의 전환 속성 전환도 존재합니다. webkitTransitionEnd
참고: 전환을 위한 이벤트는 하나만 있습니다
[관련 권장 사항]
2. 꼭 마스터해야 할 CSS3 애니메이션(애니메이션)의 8가지 주요 속성
4.css3의 두 가지 일시 중지 방법(전환, 애니메이션)에 대한 자세한 설명
위 내용은 CSS3 애니메이션 종료 이벤트 모니터링 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.