animation-name [动画名称]

### 语法
```css
/*定义一个或多个动画名称。*/
animation-name: none | <identifier> [ , none | <identifier> ]*;
```
<table class="table"><thead><tr><th width="20%">语法项目</th><th>说明</th></tr></thead><tbody><tr><td>初始值</td><td>none</td></tr><tr><td>适用于</td><td>所有元素</td></tr><tr><td>可否继承</td><td>否</td></tr><tr><td>媒介</td><td>视觉</td></tr><tr><td>版本</td><td>CSS3.0</td></tr></tbody></table>

### 说明
检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由`@keyframes`定义。

如果提供多个属性值，以逗号进行分隔。

#### 如何开始进行动画
`@keyframes`相当于一个命名空间，后面跟一个名词，如果在class中的`animation-name`定义了与之对应的name，那么就可以执行动画了。定义动画时，简单的动画可以直接使用关键字`from`和`to`，即从一种状态过渡到另一种状态：如：
```css
  @-webkit-keyframes demo{
        from{left:0;}
        to{left:400px;}
  }
```
  复杂动画：
```css
  @-webkit-keyframes demo{
        0%{left:0;}
        50%{left:200px;}
        100%{left:400px;}
  }
```
这里面的百分百有点像flash里帧的概念。表示设置某个时间段内任意时间点的样式。

### 取值
`none`：不引用任何动画名称

`identifier`：定义一个或多个动画名称(`identifier`标识)

### 实例代码
<iframe src="http://example.itshubao.com/inexample/438.html" width="100%" height="250px" frameborder="0" scrolling="no"></iframe>

### 兼容性
<table class="table"><thead><tr><th class="ie" width="20%">IE</th><th class="firefox" width="20%">Firefox</th><th class="opera" width="20%">Opera</th><th class="safari" width="20%">Safari</th><th class="chrome" width="20%">Chrome</th></tr></thead><tbody><tr><td>IE 10+</td><td>Firefox 3.5+</td><td>目前暂无版本支持</td><td>Safari 10+</td><td>Chrome 2.0+</td></tr></tbody></table>