您的位置:首页 > Web前端 > CSS

css3 animation一些很有用的属性和方法

2016-01-20 14:43 411 查看
1.animation-play-state

元素动画运动的状态,有两个值,runinng(运动)和paused(暂停) ;

JS语法控制:obj.style.animationPlayState="paused"||bj.style.animationPlayState="running";

demo

2.animation-fill-mode

fill-mode有两个有用的值,一个在运动完之后保持元素保持动画里面最后一帧的状态,一个是动画未开始之前,延迟属性-webkit-animation-delay之内,就执行动画的第一帧。

demo

3.animation-step帧动画,CSS3可以实现关键帧动画,具体的可以看看艾伦哥的博客,他分析的比较透彻,

详细分析step demo

4.animationEnd是一个方法,就是当动画完成之后就触发这个事件,需要加上-webkit等兼容的后缀,说道这个还有一个事件也是同样的作用transitionEnd,过渡动画是否结束,写法请看demo:

demo
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: