在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)css3动画，监控动画执行完毕
原文地址：https://www.cnblogs.com/mafengzi/p/10468471.html