View in EnglishAlways switch to English

animation

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.

* Some parts of this feature may have varying levels of support.

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

尝试一下

animation: 3s ease-in 1s infinite reverse both running slidein;

animation: 3s linear 1s infinite running slidein;

animation: 3s linear 1s infinite alternate slidein;

animation: 0.5s linear 1s infinite alternate slidein;

<section>  <div></div></section>

#example-element {  background-color: #1766aa;  margin: 20px;  border: 5px solid #333;  width: 150px;  height: 150px;  border-radius: 50%;}@keyframes slidein {  from {    margin-left: -20%;  }  to {    margin-left: 100%;  }}

语法

css

/* @keyframes duration | easing-function | delay |iteration-count | direction | fill-mode | play-state | name */animation: 3s ease-in 1s 2 reverse both paused slidein;/* @keyframes duration | easing-function | delay | name */animation: 3s linear 1s slidein;/* two animations */animation:  3s linear slidein,  3s ease-out 5s slideout;

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

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

以下属性出现 0 次或 1 次：
animation 的 name 值可能是：none，<custom-ident>，<string>
<time> 可能会出现 0、1 或 2 次

每个动画定义中的属性值的顺序很重要：可以被解析为<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> =
<'animation-duration'>||
<easing-function>||
<'animation-delay'>||
<single-animation-iteration-count>||
<single-animation-direction>||
<single-animation-fill-mode>||
<single-animation-play-state>||
[none|<keyframes-name>]||
<single-animation-timeline>

<animation-duration> =
[auto|<time [0s,∞]>]#

<easing-function> =
<linear-easing-function>|
<cubic-bezier-easing-function>|
<step-easing-function>

<animation-delay> =
<time>#

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

<single-animation-timeline> =
auto|
none|
<dashed-ident>|
<scroll()>|
<view()>

<linear-easing-function> =
linear|
<linear()>

<cubic-bezier-easing-function> =
ease|
ease-in|
ease-out|
ease-in-out|
<cubic-bezier()>

<step-easing-function> =
step-start|
step-end|
<steps()>

<scroll()> =
scroll([<scroller>||<axis>]?)

<view()> =
view([<axis>||<'view-timeline-inset'>]?)

<linear()> =
linear([<number>&&<percentage>{0,2}]#)

<cubic-bezier()> =
cubic-bezier([<number [0,1]> ,<number>]#{2})

<steps()> =
steps(<integer> ,<step-position>?)

<scroller> =
root|
nearest|
self

<axis> =
block|
inline|
x|
y

<view-timeline-inset> =
[[auto|<length-percentage>]{1,2}]#

<integer> =
<number-token>

<step-position> =
jump-start|
jump-end|
jump-none|
jump-both|
start|
end

<length-percentage> =
<length>|
<percentage>

示例

赛隆人之眼

html

<div>  <div>Listening for dispatches</div>  <div></div></div>

css

.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, 0.9) 25%,    rgba(0, 0, 0, 0.1) 50%,    rgba(0, 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 动画。