这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

CSS animation属性是如下属性的一个简写属性形式: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-directionanimation-fill-mode.

一个对哪些属性是可动画的可用描述; 值得注意的是,此描述也适用于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

语句

/* @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;

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

请注意,在每个动画定义中,顺序也很重要,用于区分 animation-name 值与其他关键字。解析时,对于  animation-name以外的其他属性有效的关键字必须在这些属性中被接受,而不是 animation-name。此外,当序列化时,必须至少在区分可以是另一属性的值的  animation-name 所必需的情况下输出其他属性的默认值,并且可以在附加的情况下输出。

语法

<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> = <single-transition-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
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )

范例

请参阅 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%; }  }

规范

Specification Status Comment
CSS Animations
animation
Working Draft Initial definition

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit
43.0
(Yes)-webkit
(Yes)
5.0 (5.0)-moz
16.0 (16.0)[2]
10 12-o
12.50[3]
4.0-webkit
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 -webkit [1]
4.0 -webkit
(Yes)-webkit
(Yes)
5.0 (5.0)-moz
16.0 (16.0)
? ? (Yes)-webkit

[1] Partial support: animation-fill-mode property is not supported in Android browser below 2.3.

[2] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] See the release notes to Opera 12.50.

也可以看看

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, mrstork, Ende93, teoli, Sebastianz, ziyunfei, fishenal
 最后编辑者: xgqfrms-GitHub,