首页 > 代码库 > css3 animation

css3 animation

2024-08-12 16:20:30   223人阅读

最近在写一些静态展示页面，查找一些H5模板的时候发现很多动态效果都使用了，css3的animation 属性去处理。稍微研究了一下，做个小结。

animation 与H5 的Canvas 还是有很大的不同的

1.Animation只应用在页面上已存在的DOM元素上

2.依据相关属性去实现动画效果要比js或jQuery简单不少，但基本效果还可以，如果想要更好的效果还是建议使用js/jquery或flash

3.可以同时设置多个效果 要用 " , "逗号隔开 

语法：animation: name duration timing-function delay iteration-count direction;
值描述
animation-name规定需要绑定到选择器的 keyframe 名称。。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。

 

实例：http://www.w3school.com.cn/tiy/t.asp?f=css3_animation

 

css3 animation


联系
我们