css3动画，监控动画执行完毕

在CSS3之前，在网页上要做动画，一般使用javascript来实现，用timer定时执行一些操作来实现动画效果。

自有了CSS3之后，在网页上做动画变得更简单了。相对于使用javascript的实现方式，用CSS3实现的动画效果更流畅，实现起来也更简单。当然，因为CSS几乎没有什么逻辑控制，所以一般只用来做一些简单的、与用户没有交互的动画。

在CSS3中有两种实现动画的方式，一种是使用transition，另一种是使用animation。如果只是想要简单的过渡效果，则使用transition，如果是做稍微复杂一点的、在不同时间点执行不同动画效果的动画，则应使用animation。

用CSS3实现动画虽然简单，但如何监控动画的执行呢？比如，你可能希望在动画执行完毕之后执行某些操作。

第一种比较low的方式是可以设置一个与动画相同时长的timer。

假设动画时长是1s：

#mydiv{
    transition: 1s;
}

则可以在动画开始执行后，相隔相同时间后执行你要的操作：

setTimeout(function(){
    // do something
}, 1000);

这种方式虽然low，但一般情况下却是可行的。

但这种方式却是不够精确的。因为CSS3的动画在执行过程中并不是精确的时间，你设置了动画时长1s，但实际时长却可能会稍短或稍长。另外，timer的时间也是不精确的。

那么，如果你需要比较精确的在动画执行完毕之后执行某个操作，则应该监听transitionend事件。

mydiv.addEventListener(‘transitionend‘, function(){
    // do somthing
}, false)

原文地址：https://www.cnblogs.com/mafengzi/p/10468471.html