标签：css3 动画 transition timer 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)

标签：css3,动画,transition,timer,CSS3,监控,执行,时长
来源： https://www.cnblogs.com/mafengzi/p/10468471.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。