锐客网

  1. 首页 > 睿知 > it技术 > >

css动画中间暂停几秒,详解css3中两种暂停方式（transition、animation）

让坐标变化的两种方式：
1.传统的top,left坐标修改
2.CSS3中的transform属性
通过CSS3的animation与transition的结合实现了人物的走路的效果。一般来说运动的状态都是需要可控的，这样才方便我们做进一步的操作。利用animation实现了人物动作的变化，即更换了精灵图的位置，而transition是实现了人物的left变化，即坐标向右移动，人物向前走，背景向后走。
transition的暂停方式
transition，一般来说要暂停的地方都是一开始就程序设定好的目标点，因此这个其实是不需要控制的，这个也没办法控制，这个是一个动画过渡的效果，浏览器只提供了一个动画结束的回调。当然可以有一个变通的办法，做一个强制改变目标过渡值的处理
如何操作：$("button:last").click(function() {
var left = $boy.css('left');
// 强制做了一个改变目标left的处理
// 动画是要运行10秒,所以此时动画还是没有结束的
$boy.css('left',left);
// 增加暂停的样式
$boy.addClass('pauseWalk');
});
transition的停止，就是让他强制是在当前的left值处。
具体可以看上边的代码块，暂停方法内transition强制做了一个设置left坐标的处理，达到一个暂停的效果，但是这样是有问题的，下一次的启动必须等上一次动画的时间结束。
animation的暂停方式
CSS3的animation直接提供一个animation-play-state的样式来控制动画的暂停处理。增加一个控制暂停样式，写动画样式的时候特别注意下不同浏览器的兼容性，加上对应的前缀.pauseWalk {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
只需要在对应的有animation动画人物元素节点上，通过动态增加删除这个样式就可以控制这个精灵的开始与暂停了，非常简单
【相关推荐】
1. 详细介绍CSS3中animation-direction属性
2. 必须掌握的CSS3动画(Animation)的8大属性
【css动画中间暂停几秒,详解css3中两种暂停方式（transition、animation）】3. 利用animation属性实现循环间的延时执行实例教程
4. 分享一个监听css3动画(animation)结束事件实例

    推荐阅读


    上一篇：没有了

    下一篇：css3动画有哪3种,css3实现动画有几种方式（）