今天说一说 CSS3 标准的动画属性:
本文是基于w3cschool在线教程的官网完成的。先贴出官网上给出的实例代码和运行结果的截图
语法:
animation:name duration timing-function delay iteration-count direction
看一下各个参数的使用方法:
1.name:规定需要绑定到选择器的 keyframe 名称,必须与规则@keyframe配合使用
2.duration:规定完成动画所花费的时间,以秒或者毫秒计数
3.timing-function:规定动画的速度曲线
3-1.linear:动画从头到尾速度是相同的
3-2.ease:是默认的。动画从低速开始,然后加速,在结束前变慢
3-3.ease-in:动画从低速开始
3-4.ease-out:动画以低速结束
3-5.ease-in-out:动画以低速开始和结束
3-6.cubic-bezier(n,n,n,n):也叫贝塞尔曲线,在cubic-bezier函数中自己的值。想要搞清楚这个方法,首先要知道贝塞尔曲线的使用方法
4.delay:规定在动画开始之前的延迟时间
5.iteration-count:规定动画应该播放的次数。
它的值可以为 infinite :表示无限循环。 一个number:表示循环的次数
6.direction:规定是否应该轮流反向播放动画。它的值可以为:
normal : 正常方向(默认)
reverse : 反方向运行
alternate : 动画先正常运行再反方向运行,并持续交替运行
alternate-reverse : 动画先反运行再正方向运行,并持续交替运动
http://www.w3school.com.cn/tiy/t.asp?f=css3_animation-direction
上面就是该官网上面举的实例。当然这里面其实不止6个。遇到的时候在补充总结吧。
另外除了上面直接使用 animation 的方法之外还可以使用下面这个方法:
上面的两个效果是相同的,都是延迟3秒之后开始移动。除了上面的delay方法,对于上面提到的6个参数都可以使用这样的方法来实现同样的效果。
希望对读者有所帮助!