玩转有趣的 CSS3 Animation 动画
CSS3 Animation动画浏览器支持情况：
各浏览器对css Animation技术的支持还是很不错的。
下面就来看一下如何玩转 CSS3 Animation 技术。
@keyframes 规则
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
先来举一个栗子：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
上方的CSS语句代表什么含义呢，听我慢慢道来：
-
首先添加声明 @keyframes 规则，就像我们在JavaScript中的 var 或者 function 关键字一样，告诉JavaScript我要声明一个变量或者声明一个函数语句。只不过 @keyframes 是告诉CSS我需要声明一组Animation。
-
紧接着一个空格再给你声明的这组Animation一个名字，不然当你需要在CSS的其他地方添加Animation的时候怎么知道是要用那一组呢，这里给他命名为 myfirst。（和js的变量命名规则几乎一样，不要使用CSS中的关键词或者保留关键词，不可以以数字开头等等，可以包含数字字母和下划线）。
-
好的，进入css块内，from关键词表示应用改动画的元素初始状态的属性是怎么样的，to关键词表示应用该动画的元素最终状态的CSS属性是怎么样的，你还可以省略 from 的初始状态：
@keyframes myfirst
{
to {background: yellow;}
}
表示当前元素从当前属性状态过渡到to关键词制定的状态。
当然除了使用 from 和 to 关键词，你还可以使用百分比表示动画进行的某个阶段：
@keyframes myfirst
{
0% {background: red;}
100% {background: yellow;}
}
当然0-100中间的值也是可以设置的:
@keyframes myfirst
{
0% {background: red;}
25% {background: green;}
50% {background: blue;}
100% {background: yellow;}
}
CSS3 Animation动画初体验
好的，以最后一组代码为例，看一下他的应用效果：
如下是源码：
<style>
@keyframes myfirst
{
0% {background: red;}
25% {background: green;}
50% {background: blue;}
100% {background: yellow;}
}
.myfirst-div{
width: 100px;
height: 100px;
animation: myfirst 1s ease infinite;
}
</style>
<div class="myfirst-div"></div>
关注点请放到这句上：
animation: myfirst 1s ease infinite;
类似于JavaScript中调用函数那样，这就相当于在CSS中调用动画，而animation的属性值就是我们给这个函数传入的参数们，当然，JavaScript中支持一种叫座函数重载的特性，CSS中也不例外，其实css中与animation技术有关的属性值一共有8个：
- animation-name : 规定 @keyframes 动画的名称。
- animation-duration : 规定 @keyframes 动画的名称。
- animation-timing-function : 规定 @keyframes 动画的名称。
- animation-delay : 规定 @keyframes 动画的名称。
- animation-iteration-count : 规定动画被播放（迭代）的次数。默认是 1。
- animation-direction : 规定动画是否在下一周期逆向地播放。默认是 “normal”。
- animation-play-state ： 规定动画是否正在运行或暂停。默认是 “running”。
- animation-fill-mode ： 规定对象动画时间之外的状态。
他们还有一种简写的形式，就像上方例子中那样全部跟在 animation 后即可：
animation: name duration timing-function delay iteration-count derection fill-mode;
注意：简写形式的最简化情况是只包含 animation-name 和 animation-duration，并且至少包含这两个属性值。
你可能发现了，为什么简写的形式只有7个参数呢，因为animation-play-state参数只能单独作为属性存在而非animation简写形式的一枚参数！
请看下方示例：
源码：
@keyframes mysecond{
0% {
background: red;
}
100% {
background: yellow;
}
}
.mysecond-div{
width: 100px;
height: 100px;
animation-name: mysecond;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: .2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
</style>
<div class="mysecond-div"></div>
同样他的简写形式：
.mysecond-div{
width: 100px;
height: 100px;
animation: mysecond 1s linear .2s infinite alternate;
animation-play-state: running;
}
逐一介绍animation的8个属性值
(1) animation-name
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationName="mymove" |
为 @keyframes 动画规定一个名称
animation-name: keyframename|none;
| 值 | 描述 |
|---|---|
| keyframename | 规定需要绑定到选择器的 keyframe 的名称。 |
| none | 规定无动画效果（可用于覆盖来自级联的动画）。 |
(2) animation-duration
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
| 默认值： | 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationDuration="3s" |
animation-duration: time;
| 值 | 描述 |
|---|---|
| time | 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。 |
(3) animation-timing-function
animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。
| 默认值： | ease |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationTimingFunction="linear" |
animation-timing-function: value;
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
| Steps(<number_of_steps>，<direction>) | 创建逐帧动画 |
(4) animation-delay
animation-delay 属性定义动画何时开始。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
| 默认值： | 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationDelay="2s" |
(5) animation-iteration-count
animation-iteration-count 属性定义动画的播放次数。
| 默认值： | 1 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationIterationCount=3 |
animation-iteration-count: n|infinite;
| 值 | 描述 |
|---|---|
| n | 定义动画播放次数的数值。 |
| infinite | 规定动画应该无限次播放。 |
(6) animation-direction
animation-direction 属性定义是否应该轮流反向播放动画。如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
| 默认值： | normal |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationDirection="alternate" |
animation-direction: normal|alternate;
| 值 | 描述 |
|---|---|
| normal | 默认值。动画应该正常播放。 |
| alternate | 动画应该轮流反向播放。 |
(7) animation-play-state
animation-play-state 属性规定动画正在运行还是暂停。可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
| 默认值： | running |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationPlayState="paused" |
animation-play-state: paused|running;
| 值 | 描述 |
|---|---|
| paused | 规定动画已暂停。 |
| running | 规定动画正在播放。 |
(8) animation-fill-mode
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。其属性值是由逗号分隔的一个或多个填充模式关键词。
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationFillMode=none |
animation-fill-mode : none | forwards | backwards | both;
| 值 | 描述 |
|---|---|
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |
