animation

跳转到：
  1. 语法
  2. 范例
  3. 潜在的问题
  4. 规范
  5. 浏览器兼容性
  6. 更多

翻译正在进行中。

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变换。

初始值as each of the properties of the shorthand:
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性否
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typediscrete
正规顺序order of appearance in the formal grammar of the values

语法

 

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

每组animation规定的属性如下：

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

每个动画定义中的值的顺序，对于区分动画名称值与其他关键字也很重要。解析时，对于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中可用的值之一。 

 

 

语法

 

<single-animation>#
where 
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where 
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
<single-animation-iteration-count> = infinite | <number>
<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>
where 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

范例

请参阅 CSS 动画的示例。 

Cylon 眼睛

考虑到所有浏览器特定的前缀，这里是一个Cylon 眼睛动画合并线性渐变和动画，适用于所有主要的浏览器：

<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 {
  color:white;
  height: 100%;
  width: 20%;

  background-color: red;
  background-image: -webkit-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:     -ms-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  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%);

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

@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
     @-o-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 Status Comment
CSS Animations
animation		 Working Draft Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
animationChrome Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 10Opera Full support 30
Full support 30
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 15
No support 12 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support Yes
Full support Yes
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support Yes
Full support Yes
Full support 2
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The animation-fill-mode property is not supported in Android browsers below 2.3.
Chrome Android Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 30
Full support 30
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 14
No support 12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 4.0
Full support 4.0
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

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会将其修复了。

更多

文档标签和贡献者

标签： 
此页面的贡献者： Yayure, callmezhenzhen, ShirleyM, zhuangyin, xgqfrms-GitHub, mrstork, Ende93, teoli, Sebastianz, ziyunfei, fishenal
最后编辑者: Yayure,