css动画

1、animation动画

定义动画Keyframes

语法：@keyframes animationname{keyframes-selector {css-style;}}

 animationname ：定义动画的名称

from（与0%相同）

to(与100%相同)

2、animation的播放

 1、设置动画的播放方式

  播放次数的角度：infinite：无限次播放（不加此属性只播一次）

  播放速度角度：animation-timing-function规定动画的速度曲线

语法:animation-timing-function：value;

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

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

         ease-in动画以低速开始

         ease-out动画以低速结束 

         ease-in-out动画以低速开始，低速结束

       cubic-bezier(x1,y1,x2,y2) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

2、设置动画开始播放时间、

animation-delay 属性定义动画何时开始。

语法：animation-delay: time;

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计

语法：  animation-duration: time;

3、设置动画播放方向

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

语法：animation-direction: normal /  alternate;

normal：默认值  动画正常播放

alternate：让动画轮流反向播放

4、动画播放次数

animation-iteration-count ?属性定义动画的播放次数。

语法：animation-iteration-count: n/infinite;

n : 定义动画的播放次数

infinite : 定义动画无限播放

5、动画时间外属性

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

语法：animation-fill-mode: none|forwards|backwards|both

none :默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。

forwards :  在动画结束后（由 animation-iteration-count 决定），动画体被锁定的位置在结束的位置

backwards：在动画结束后（由 animation-iteration-count 决定），动画体被锁定 的位置在开始的位置