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
元素动画运动的状态,有两个值,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
相关文章推荐
- CSS3渐变
- CSS学习总结
- CSS学习摘记
- css padding在ie7、ie6、firefox中的兼容问题
- CSS总结
- CSS选择器
- CSS3 新属性
- css三角原理
- IOS 设置导航栏全局样式
- 自定义样式 实现文件控件input[type='file']
- html定义input type=file 样式的方法
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- :nth-child(css3的伪类选择器)
- css段落首行缩进,文字间距
- 终于搞懂了CSS实现三角形图标的原理
- css3动画简介以及动画库animate.css的使用
- 利用css中的em实现弹性页面布局
- Css中的px em rem区别
- 页面加载顺序及解析流程分享
- css全局样式覆盖默认的样式