[10 MINS/DAY] CSS Animation

• CSS animation属性代表什么

animation = animation-name + animation-duration + animation-timing-function + animation-delay + animation-iteration-count + animation-direction + animation-fill-mode + animation-play-state

• Animation-name

指定了应用的一系列动画，每个名称对应@keyframes定义的一个动画序列

.<class-name> {
animation-name: <anime_A>, <anime_B>;
animation-name: initial;
animation-name: inherit;
animation-name: unset;
/*初始值*/
animation-name: none; 
}

*inherit: 从父级类继承css属性
initial: 使用浏览器初始css属性
unset: 如果父级有对应的属性就继承，没有就用初始默认值，就是既是inherit又是initial*

• Animation-duration

一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。

• Animation-timing-function 缓动函数

定义CSS动画在每一动画周期中执行的节奏。一个或多个值。
对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。
定义于一个关键帧区块的缓动函数(animation timing function)应用到该关键帧；若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

timing-function表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。~~~~

timing-function	description
ease	此关键字表示定时函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。 这个函数类似于ease-in-out,只是它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。
ease-in	此关键字表示定时函数cubic-bezier(`0.42, 0.0, 1.0, 1.0`)。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。
ease-out	此关键字表示定时函数 cubic-bezier(`0.0, 0.0, 0.58, 1.0`)。动画开始很快，然后逐渐减慢，直到最终状态。
ease-in-out	此关键字表示定时函数 cubic-bezier(`0.42, 0.0, 0.58, 1.0`)。使用这个定时函数，动画开始的行为类似于 ease-in 函数，动画结束时的行为类似于ease-out函数。
linear	此关键字表示定时函数cubic-bezier(`0.0, 0.0, 1.0, 1.0`)。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。
step-start	此关键字表示定时函数 steps(1, start)。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。
step-end	此关键字表示定时函数 steps(1, end)。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。

• 定时函数

1.立方贝塞尔曲线的子集 cubic-bezier()
这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（_easing functions_）。
贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态.
Px(time,status).
cubic-bezier(x1,y2,x2,y2)中x1_, _y1_, _x2_, _y2是<number>类型的值，它们代表当前定义立方贝塞尔曲线中的P1 和 P2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。
2.阶梯函数
step()定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。

steps(number_of_steps, direction)

number_of_steps是一个正Integer（>0）用于表示划分的步数
direction表示函数是左连续（start），右连续（right）

steps(5, end)          There is 5 treads, the last one happens right before the end of the animation.
steps(2, start)        A two-step staircase, the first one happening at the start of the animation.

• animation-delay

定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。默认0s（值要有单位，s或者ms）。
定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

• animation-iteration-count

定义动画在结束前运行的次数 可以是1次或者无限循环（infinite）.
如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。（比如“1，2” 代表第一次动画循环一次，第二次动画循环两次，然后如上重复。）

• animation-direction

指示动画是否反向播放, 值如下：

# normal 每个循环内动画向前循环，循环结束，动画重置到起点重新开始（默认值）.
animation-direction: normal
# reverse 反向运行动画，每周期结束动画由尾到头运行
animation-direction: reverse
# alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
animation-direction: alternate
# alternate-reverse 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

• animation-fill-mode

设置CSS动画在执行之前和之后如何将样式应用于其目标。

/* Single animation */
# none 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
animation-fill-mode: none;
# forward 目标将保留由执行期间遇到的最后一个关键帧计算值。
animation-fill-mode: forwards;
# backward 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值.
animation-fill-mode: backwards;
# both 动画将遵循`forwards`和`backwards`的规则，从而在两个方向上扩展动画属性。
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Forward:

animation-direction	animation-iteration-count	last keyframe
normal	even/odd	100% or to
reverse	even/odd	0% or from
alternate	even	0% or from
alternate	odd	100% or to
alternate-reverse	even	100% or to
alternate-reverse	odd	0% or from

Backward

animation-direction	first keyframe
normal or alternate	0% or from
reverse or alternate-reverse	100% or to

• animation-play-state

定义一个动画是否运行或者暂停. 可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放.恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画.
running : 当前动画正在运行。
paused : 当前动画已被停止。

• @keyframe

通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和transition相比，关键帧 keyframes 可以控制动画序列的中间步骤。
一个关键帧规则没有指定动画的开始或结束状态（也就是，0%/from 和100%/to，浏览器将使用元素的现有样式作为起始/结束状态。如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。
如果多个关键帧使用同一个名称，以最后一次定义的为准。
关键帧中出现的 !important 将会被忽略。

@keyframes example {
  from { margin-top: 50px; }
  50%  { margin-top: 150px }
  to   { margin-top: 100px; }
}