• animation 属性是为元素添加动画序列的，它是一个简写属性，从 animation-mdn 看它有8个子属性，是一个复杂的CSS 属性，但是普通使用的话并不复杂，复杂使用目前没有接触到。

  • 可以使用 animation 属性及其子属性为元素添加动画序列。

  • animation 属性允许配置动画持续时长、延迟时间以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。

  • animation 简单使用举例：
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>JS Bin</title>
    6. </head>
    7. <body>
    8. <div class="square">
    9.   <div class="circle"></div>
    10. </div>
    11. </body>
    12. </html>
    ```css .square { width: 100px; height:100px; border: 1px solid #000; position: relative; }

.circle { width: 20px; height:20px; background:red; position: absolute; top: 50%; margin-top: -10px; animation: spin 2s 3 1s linear alternate; }

@keyframes spin { 0% { left: 0%; transform: rotate(0deg) } 25% { background: yellow; border-radius: 50%; } 50% { background: green; } 75% { background: yellow; border-radius: 50%; } 100% { left: 100%; transform: rotate(360deg) } }

也可以打开[在线链接](http://js.jirengu.com/hoyaxezucu/3/edit)查看。

上面提到 animation 有8个子属性，而上面代码中我们只设置了6个值，可见并不是每一个子属性值都需要设置，下面让我们看看**子属性可以设置的属性值和默认属性值**。

<a name="r1RSJ"></a>
### animation-duration 
该属性指定一个动画周期的时长。也就是0%变化到100%的时间。<br />默认值为0s，表示无动画。<br />属性值为：0/正数 + s/ms，没有单位无效。<br />开发时通常使用简写属性配置。
<a name="wySYc"></a>
#### 语法
> animation-duration：[<time>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/time)

<time> 是CSS的基本数据类型，意为这个属性值得设置为时间，可以直接点击查看。先点击查看 mdn 的[CSS 属性值定义语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#hash_mark_())说明，以后就能get MDN文档的语法说明了（仿佛发现了新大陆，以前我也是看不懂的，总觉得说得不是人话）。
<a name="kWPwo"></a>
#### 举例
```css
animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms

animation-timing-function

CSS动画在每一动画周期中执行的节奏

animation-delay

单次动画延迟时间

animation-iteration-count

动画播放次数

animation-direction

动画播放方向

animation-fill-mode

确定动画在执行之前和之后这两个阶段应用的样式 。（这里不是很理解呢）

animation-play-state

确定动画是否正在播放

animation-name

动画名字

animation-duration