CSS动画

CSS animations
两部分组成
1.一组定义的动画关键帧（@keyframes规则）
2.描述该动画的CSS声明（animation属性）

@keyframes规则

keyframes可以设置多个关键帧

@keyframes animationname {
	keyframes-selector{css-styles;}
}

keyframes-selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值可以是一个百分比、from或者to。from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束

animation属性

animation属性用于描述动画的CSS声明

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

1.animation- duration

time：以秒或毫秒计，默认是0

2.animation- timing-function

linear：动画从头到尾的速度是相同的。
ease：默认值。动画以低速开始，然后加快，在结束前变慢。
ease-in:动画以低速开始
ease-out:动画以低速结束
ease-n-out:动画以低速开始和结束
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

3.animation-delay

time

4.animation-iteration-count属性

n
infinite

5.animation-direction属性

normal
atternate:轮流反向播放

6.animation-lay-state属性

paused
running

7.animation-lay-state属性

none:不改变默认行为。
foward:当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backward:在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both:向前和向后填充模式都被应用