animation
@keyframes 规则
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 animation（动画）属性，即可将动画绑定到选择器：
-
规定动画的名称
-
规定动画的时长
animation属性
缩写语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 属性 | 描述 |
|---|---|
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
animation-name
指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列
值为none（特殊关键字）时，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。
animation-duration
一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
默认值为0s，表示无动画。
animation-timing-function
ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | step-start | step-end | linear |
对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。
定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。
animation-delay
0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；
定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。
如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。
通常用animation简写属性一次性设置动画效果较为方便。
该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。
animation-iteration-count
infinite：无限循环播放动画.
数字：动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。
多个值：如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。
animation-direction
normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。 alternate：动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代 reverse：反向运行动画，每周期结束动画由尾到头运行。 alternate-reverse：反向交替， 反向开始交替，动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
animation-fill-mode
设置CSS动画在执行之前和之后如何将样式应用于其目标。
none 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。 forwards 目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值
backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值
both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
animation-play-state
定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
running:当前动画正在运行。 paused:当前动画以被停止。
transition
transition 属性是一个简写属性，用于设置四个过渡属性
-
transition-property： 规定设置过渡效果的 CSS 属性的名称。all（所有属性）|none（没有属性）|property（选中的属性） -
transition-duration： 规定完成过渡效果需要多少秒或毫秒。规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
-
transition-timing-function： 规定速度效果的速度曲线。linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);linear ：线性过渡，均匀运动；
ease：平滑过渡，结束比较生硬；
ease-in：由慢到快，结束比较生硬；
ease-out：由快到慢；
ease-in-out：由慢到快再到慢，这种效果比较人性化。
-
transition-delay： 定义过渡效果何时开始。规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
优点
-
简单易用
-
允许CSS的属性值在一定的时间区间内平滑地过渡
-
在鼠标点击，获得焦点，被点击或对元素的任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
缺点
-
transition需要事件触发，所以没法在网页加载时自动发生。
-
transition是一次性的，不能重复发生，除非一再触发。
-
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
-
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。