CSS3动画事件

animationstart、animationend以及transitionend分别用于监听css3的关键帧动画的开始、结束以及css3过渡结束事件。

本文Demo:https://www.lyz810.com/demo/cssAnimationEvent/index.html

一、animationstart和animationend事件
animationstart事件在Animation动画开始时触发,对于低版本的webkit内核浏览器使用webkitAnimationStart事件
animationend事件在Animation动画停止时触发,对于低版本的webkit内核浏览器使用webkitAnimationEnd事件
用法示例:

document.querySelector('#test').addEventListener('animationstart', function(){
  console.log('动画开始');
});
document.querySelector('#test').addEventListener('animationend', function(){
  console.log('动画结束');
});

二、animationiteration事件
animationiteration事件会在Animation动画循环播放时触发,主要用于infinite类型的动画,会在每次循环播放完毕时触发。
无限循环的动画会触发animationstart、animationiteration两个事件。
对于低版本的webkit内核浏览器使用webkitAnimationIteration事件。
用法示例:

css:
@keyframes ani{
  from{margin-left: 0;}
  to{margin-left: 300px;}
}
#test{animation:ani 3s infinite;}

js:
document.querySelector('#test').addEventListener('animationiteration', function(){
  console.log('动画播放循环一次');
});

三、transitionend事件
transitionend事件在transition动画结束后触发。
用法示例:

document.querySelector('#test').addEventListener('transitionend', function(){
  console.log('过渡动画完毕');
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You must enable javascript to see captcha here!