css3 animation

Posted 2020-08-08

最近在写一些静态展示页面，查找一些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