animation

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

尝试一下

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

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

/* @keyframes duration | name */
animation: 3s slidein;

哪些属性是可动画的？值得注意的是，此描述也适用于CSS 变换 (en-US)。

初始值as each of the properties of the shorthand:
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性否
计算值as each of the properties of the shorthand:
Animation typeNot animatable

语法

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

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

每个动画定义中的属性值的顺序很重要：可以被解析为 <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>                              ||
  <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}

范例

赛隆人之眼 (赛隆人是一个虚构的生化人种族，出自科幻电视系列剧星际大争霸系列**)**

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.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, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(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（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。

规范

Specification
CSS Animations Level 1
# animation

浏览器兼容性

BCD tables only load in the browser

Quantum CSS notes

  • Gecko 有一个 bug，当你在屏幕上对屏幕外的元素使用带有指定延时的动画时，Gecko 不会在某些平台上重绘，例如 Windows bug 1383239。这个问题已经在 Firefox 新的并行 CSS 引擎 (也称为Quantum CSS 或者 Stylo，计划在 Firefox 57 中发布) 中得到了解决。
  • 另外一个 Gecko bug，当我们激活<details>元素的动画效果时，即使通过 open 属性也不能将其展示 (bug 1382124)。Quantum CSS 会将其修复了。
  • 另一个 bug 是，由于动画使用的是 em 单位，所以即使我们改变父元素的 font-size 属性也不会影响该动画元素 (bug 1254424)，而它们原本应该受到影响。Quantum CSS 会将其修复了。

更多