animation
=========

CSS **animation** 属性是 `animation-name`，`animation-duration`, `animation-timing-function`，`animation-delay`，`animation-iteration-count`，`animation-direction`，`animation-fill-mode` 和 `animation-play-state` 属性的一个简写属性形式。

尝试一下
----

语法
--


```css
/\* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name \*/
animation: 3s ease-in 1s 2 reverse both paused slidein;

/\* @keyframes duration | easing-function | delay | name \*/
animation: 3s linear 1s slidein;

/\* two animations \*/
animation:
  3s linear slidein,
  3s ease-out 5s slideout;
```


`animation` 属性用来指定一组或多组动画，每组之间用逗号相隔。

每组动画规定的属性如下：

* 以下属性出现 0 次或 1 次：
    + `<single-transition-timing-function>` (en-US)
    + `<single-animation-iteration-count>`
    + `<single-animation-direction>`
    + `<single-animation-fill-mode>`
    + `<single-animation-play-state>`
* animation 的 name 值可能是：none，`<custom-ident>`， `<string>`
* `<time>` 可能会出现 0、1 或 2 次

每个动画定义中的属性值的顺序很重要：可以被解析为 `<time>` 的第一个值被分配给`animation-duration`，第二个分配给 `animation-delay`。

每个动画定义中的值的顺序，对于区分 `animation-name` 值与其他关键字也很重要。解析时，对于除 `animation-name` 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。此外，在序列化时，`animation-name` 与以及其他属性值做区分等情况下，必须输出其他属性的默认值。

### Values

`<single-animation-iteration-count>`

动画播放的次数。该值必须是`animation-iteration-count`可用的值之一。

`<single-animation-direction>`

动画播放的方向。该值必须是`animation-direction`可用的值之一。

`<single-animation-fill-mode>`

确定动画在执行之前和之后这两个阶段应用的样式。该值必须是`animation-fill-mode`可用的值之一。

`<single-animation-play-state>`

确定动画是否正在播放。该值必须是`animation-play-state`中可用的值之一。

### 语法
```

animation =   
  <single-animation>#    
  
<single-animation> =   
  <time [0s,∞]>                       ||  
  <easing-function>                   ||  
  <time>                              ||  
  <single-animation-iteration-count>  ||  
  <single-animation-direction>        ||  
  <single-animation-fill-mode>        ||  
  <single-animation-play-state>       ||  
  [ none | <keyframes-name> ]           
  
<easing-function> =   
  linear                          |  
  <linear-easing-function>        |  
  <cubic-bezier-easing-function>  |  
  <step-easing-function>            
  
<single-animation-iteration-count> =   
  infinite        |  
  <number [0,∞]>    
  
<single-animation-direction> =   
  normal             |  
  reverse            |  
  alternate          |  
  alternate-reverse    
  
<single-animation-fill-mode> =   
  none       |  
  forwards   |  
  backwards  |  
  both         
  
<single-animation-play-state> =   
  running  |  
  paused     
  
<keyframes-name> =   
  <custom-ident>  |  
  <string>          
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                |  
  ease-in                                             |  
  ease-out                                            |  
  ease-in-out                                         |  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             |  
  step-end                               |  
  steps( <integer> , <step-position>? )    
  
<linear-stop-list> =   
  [ <linear-stop> ]#    
  
<step-position> =   
  jump-start  |  
  jump-end    |  
  jump-none   |  
  jump-both   |  
  start       |  
  end           
  
<linear-stop> =   
  <number>               &&  
  <linear-stop-length>?    
  
<linear-stop-length> =   
  <percentage>{1,2}    
  
```

示例
--

### 赛隆人之眼


```html
<div class="view\_port">
  <div class="polling\_message">Listening for dispatches</div>
  <div class="cylon\_eye"></div>
</div>
```



```css
.polling\_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view\_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon\_eye {
  background-color: red;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.9) 25%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.9) 75%
  );
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
  animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move\_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
@keyframes move\_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
```


更多示例请参阅使用 CSS 动画。

潜在的问题
-----

眨眼和闪烁的动画对于有认知问题的人来说是有问题的，比如注意力缺陷多动障碍 (ADHD)。此外，某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。

考虑提供一种暂停或禁用动画的机制，以及使用 Reduced Motion Media Query（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations (en-US)
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| CSS Animations Level 1 # animation |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using CSS animations (en-US)
* JavaScript `AnimationEvent` (en-US) API