animation

跳转到：
  1. 语法
  2. 范例
  3. 规范
  4. 浏览器兼容性
  5. 也可以看看

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

/* @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变换。

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

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

初始值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

语法

<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%; }  }

规范

Specification Status Comment
CSS Animations
animation		 Working Draft Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
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
frames() timing function 未实现[4] ? 未实现[4] 未实现 未实现[4] ?
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
frames() timing function ? ? 未实现[4] 未实现 ? ?

[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.

也可以看看

文档标签和贡献者

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