这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
css属性animation是如下属性的简写形式：animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode.
支持动画的css属性请查看，值得注意的是这些支持的属性和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:
|
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | order of appearance in the formal grammar of the values |
语法
Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>where
<single-animation-name> = none | IDENT
<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
对于动画定义来说，顺序是重要的:第一个 <time> 值可强制为 animation-duration, 第二个 <time> 值赋于 animation-delay.
例子
css动画的例子： CSS animations
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Animations animation |
Working Draft |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | (Yes)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10 # |
4.0-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 5.0 (5.0)-moz 16.0 (16.0) |
? | ? | iOS 2.0-webkit |
跨浏览器动画
参考上文所述，这里是一个移动的眼睛动画，采用了linear渐变，支持firefox，chrome，opera和IE10
Cylon Eye
<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%; } }