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

css3动画，监控动画执行完毕相关推荐

css3实现无限横向滚动且动画执行完毕没有跳动的视差感
前两天在模仿京东商城的无限滚动时,使用css3的transform写的时候,动画执行完毕了会突变的初始位置,使用了多种方法都没有解决,那应该怎么解决呢? 解决方法其实原理很简单,就是复制你要播放的内 ...
css3动画完成后执行某事件
方法一:setTimeout( )方法使用setTimeout( )设置指定多少毫秒后,执行某个事件.把时间设置为动画执行的时间.setTimeout() 是属于 window 的方法,该方法用于在 ...
css3新增动画属性（过度动画变形动画关键帧动画）
目录过度动画transition 多属性值过渡 2d变形transform 平移应用:实现居中(不要求知道盒子的宽高) 缩放旋转倾斜修改变形中心的属性变形属性的复合写法 3D变形动画 3d ...
第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由"keyframes& ...
从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡语法: transition: 过渡属性过渡时间延迟时间过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
CSS3: 利用分层动画让元素沿弧形路径运动
原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙译者注:部分代码示例在原文中可以看效果(作者写在博文里面了-), ...
css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...

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

css3动画，监控动画执行完毕相关推荐

最新文章

热门文章