animation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
CSS animation 属性是 animation-name
,animation-duration
, animation-timing-function
,animation-delay
,animation-iteration-count
,animation-direction
,animation-fill-mode
和 animation-play-state
属性的一个简写属性形式。
尝试一下
语法
/* @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> =
<time [0s,∞]> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<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>
<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()>
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
示例
赛隆人之眼
<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 {
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 动画。
潜在的问题
眨眼和闪烁的动画对于有认知问题的人来说是有问题的,比如注意力缺陷多动障碍 (ADHD)。此外,某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。
考虑提供一种暂停或禁用动画的机制,以及使用 Reduced Motion Media Query(简约运动媒体查询),为那些表示不喜欢动画的用户创建一个良好的体验。
规范
Specification |
---|
CSS Animations Level 1 # animation |
浏览器兼容性
BCD tables only load in the browser
参见
- Using CSS animations
- JavaScript
AnimationEvent
API