关键帧动漫

考虑浏览器支不支持；

语法：@keyframe animationname{

   keyframes-selector {css-styles;}

}

说明：

animationname:声明动画名称。

keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用“from”和“to”的形式。

“from”和“to”的形式等价于0%和100%。

建议始终使用百分比形式。

@keyframes规则和所有动画属性

属性                      描述

animation            所有动画属性的简写属性，除了animation-play-state属性。

animation-name   规定@keyframes动画的名称。

animation-

规定动画完成一个周期所花费的秒或毫秒。默认是0.

animation-timing-function 规定3D元素的透视效果。

animation-delay     规定动画何时开始。默认是0；

animation-iteration-count 规定动画被播放的次数。默认是1

语法：animation-timing-function:value;

说明：

animation-timing-function 规定动画的速度曲线。

linear:动画从头到尾的的速度是相同的。

ease:默认。动画以低速度开始，然后加快，在结束前变慢。

ease-in:动画以低速度开始

ease-out：动画以低速度结束

ease-in-out:动画以低速度开始和结束

cubic-bezier(n,n,n,n):在函数中自己的值，可能的值是从0到1的数值

语法：animation-direction:normal|alternate;

说明：

animation-direction 属性定义是否应该轮流反向播放动画。

如果animation-direction值是“alternate”，则动画会在奇数次数（1，3，5等等）正常播放，er在偶数次数（2，4，6等等）向后播放。

normal:默认值。动画应该正常播放。

alternate:动画应该轮流反向播放

语法：animation-play-state:paused|running;

说明：animation-play-state 属性规定动画正在运行还是暂停。

注释：您可以在javaScript中使用该属性，这样就能播放过程中暂停动画。

paused:规定动画已暂停。

running：规定动画正在播放。