首页 >web前端 >css教程 >详解css3中两种暂停方式(transition、animation)

详解css3中两种暂停方式(transition、animation)

零下一度
零下一度原创
2017-05-18 14:38:418731浏览

让坐标变化的两种方式:

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大属性

3. 利用animation属性实现循环间的延时执行实例教程

4. 分享一个监听css3动画(animation)结束事件实例

以上是详解css3中两种暂停方式(transition、animation)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn