在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)