一、animation基本用法
animation: name duration timing-function delay iteration-count direction fill-mode;
二、animation属性参数说明
1、name (animation-name)
动画的名字,即设定动画过程的名字,CSS3采用“关键帧 keyframes”来定义动画,方式形如:
2、duration (animation-duration)
整个动画的持续时间,必须带上时间单位,s或者ms均可;
3、timing-function (animation-timing-function)
定义动画的速度曲线,值有如下几种
(1)、ease:动画以低速开始,然后加快,在结束前变慢。
(2)、linear:匀速
(3)、ease-in:动画以低速开始
(4)、ease-out:动画以低速结束
(5)、ease-in-out:动画以低速开始和结束,相对于ease缓慢,速度更均匀
(6)、step-start:按keyframes设置逐帧显示,第一帧为keyframes设置的第一帧。
(7)、step-end:按keyframes设置逐帧显示,第一帧为样式的初始值。
4、delay (animation-delay)
动画延迟执行的时间,单位也是s或者ms,值得注意的是,即使延迟时间为0,也必须加上时间单位
5、iteration-count (animation-iteration-count)
动画循环执行的次数,无单位,infinite为无限循环。
6、direction (animation-direction)
指动画时间轴上帧前进的方向。
(1)、normal:默认值,表示一直向前,最后一帧结束后回到第一帧
(2)、reverse:与normal的运行方向相反
(3)、alternate:往前播放完了之后,然后再倒带,倒带到头了再往后播放
(4)、alternate-reverse:与alternate的运行方向相反
7、fill-mode (animation-fill-mode)
设置动画结束后的状态
(1)、none:默认值。不设置对象动画之外的状态,DOM未进行动画前状态
(2)、forwards:设置对象状态为动画结束时的状态,100%或to时,当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
(3)、backwards:设置对象状态为动画开始时的状态,(测试显示DOM未进行动画前状态)
(4)、both:设置对象状态为动画结束或开始的状态,结束时状态优先
文章转载自: CSS3中animation属性的使用 http://www.studyofnet.com/news/1141.html