@keyframes简单使用

1.语法

@keyframes  animationname(动画名称)  {
	0%{要实现的css样式}
	10%{要实现的css样式}
	...
	100%{要实现的css样式}
}

2.使用方法

将动画效果加入到需要的模块中，使用animation属性，例如：

 .test{
	   animation: animationname 10s linear infinite alternate;
 }

这样class="test" 这个模块就实现了这个动画。

3.animation属性说明

语法

animation: name duration timing-function delay iteration-count direction;

属性说明

• [ name] @keyframes 动画的名称，eg:animationname.
• [ duration] 规定动画完成一个周期所花费的秒或毫秒,默认是 0,意味着不会播放动画.
• [ timing-function] 规定动画的速度曲线。默认是 “ease”.

可以使用的值有：
linear： 匀速
ease： 低速开始，加快，再变慢
ease-in： 动画以低速开始
ease-out： 动画以低速结束
ease-in-out： 动画以低速开始和结束
cubic-bezier(n,n,n,n)： 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

• [ fill-mode] 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式.

可以使用的值为：
none:默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards:在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards:动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时
both:动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial:设置该属性为它的默认值。
inherit:从父元素继承该属性。

• [ delay] 规定动画何时开始。默认是 0.
• [ iteration-count]规定动画被播放的次数。默认是 1.

可以使用的值为：
n:指定一个数字
infinite：指定动画应该播放无限次（永远）

• [ direction] 规定动画是否在下一周期逆向地播放。默认是 “normal”.

可以使用的值：
normal：默认值。动画按正常播放。
reverse：动画反向播放。
alternate： 动画在奇数次（周期）（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse：动画在奇数次（周期）（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial：设置该属性为它的默认值
inherit：从父元素继承该属性

4.动画是否运行

animation-play-state:规定动画是否正在运行或暂停。默认是 “running”，"paused "为暂停。