CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
/* @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;
<div class="grid">
<div class="col">
<div class="note">
Given the following animation:
<pre>@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}</pre>
</div>
<div class="row">
<div class="cell">
<button class="play" title="PLAY"></button>
</div>
<div class="cell flx">
<div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div>
<div class="animation a1"></div>
</div>
</div>
<div class="row">
<div class="cell">
<button class="pause" title="PAUSE"></button>
</div>
<div class="cell flx">
<div class="overlay">animation: 3s linear 1s slidein;</div>
<div class="animation a2"></div>
</div>
</div>
<div class="row">
<div class="cell">
<button class="pause" title="PAUSE"></button>
</div>
<div class="cell flx">
<div class="overlay">animation: 3s slidein;</div>
<div class="animation a3"></div>
</div>
</div>
</div>
</div>
html,body {
height: 100%;
box-sizing: border-box;
}
pre { margin-bottom: 0; }
svg { width: 1.5em; height: 1.5em; }
button {
width: 27px;
height: 27px;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
border-radius: 3px;
cursor: pointer;
}
button.play {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
}
button.pause {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
}
button.restart {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
}
.grid {
width: 100%;
height: 100%;
display: flex;
background: #EEE;
font: 1em monospace;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
display: flex;
flex: 1 auto;
flex-direction: column;
}
.cell {
box-sizing: border-box;
margin: .5em;
padding: 0;
background-color: #FFF;
overflow: hidden;
text-align: left;
}
.flx {
flex: 1 0;
}
.note {
background: #fff3d4;
padding: 1em;
margin: .5em;
font: .8em sans-serif;
text-align: left;
flex: none;
}
.overlay { padding: .5em; }
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
.a2 { animation: 3s linear 1s slidein; }
.a3 { animation: 3s slidein; }
.animation {
background: #3F87A6;
width: 100%;
height: calc(100% - 1.5em);
transform-origin: left center;
}
window.addEventListener('load', function () {
var ANIMATION = Array.from(document.querySelectorAll('.animation'));
var BUTTON = Array.from(document.querySelectorAll('button'));
function toggleButton (btn, type) {
btn.classList.remove('play', 'pause', 'restart');
btn.classList.add(type);
btn.title = type.toUpperCase(type);
}
function playPause (i) {
var btn = BUTTON[i];
var anim = ANIMATION[i];
if (btn.classList.contains('play')) {
anim.style.animationPlayState = 'running';
toggleButton(btn, 'pause');
} else if (btn.classList.contains('pause')) {
anim.style.animationPlayState = 'paused';
toggleButton(btn, 'play');
} else {
anim.classList.remove('a' + (i + 1));
setTimeout(function () {
toggleButton(btn, i === 0 ? 'play' : 'pause');
anim.style.animationPlayState = '';
anim.classList.add('a' + (i + 1));
}, 100)
}
}
ANIMATION.forEach(function (node, index) {
node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause'); });
node.addEventListener('animationend', function () { toggleButton(BUTTON[index], 'restart'); });
});
BUTTON.forEach(function (btn, index) {
btn.addEventListener('click', function () { playPause(index); });
});
})
哪些属性是可动画的？值得注意的是，此描述也适用于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 type | discrete |
| 正规顺序 | order of appearance in the formal grammar of the values |
语法
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中可用的值之一。
语法
<single-animation>#where
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-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>[, <step-position>]?)where
<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, .9) 25%,
rgba(0, 0, 0, .1) 50%,
rgba(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（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。
- Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
- An Introduction to the Reduced Motion Media Query | CSS-Tricks
- Responsive Design for Motion | WebKit
- MDN Understanding WCAG, Guideline 2.2 explanations
- Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Animations animation |
Working Draft | Initial definition |
浏览器兼容性
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
animation | Chrome
Full support
43
| Edge
Full support
12
| Firefox
Full support
16
| IE Full support 10 | Opera
Full support
30
| Safari
Full support
9
| WebView Android
Full support
43
| Chrome Android
Full support
43
| Firefox Android
Full support
16
| Opera Android
Full support
30
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
4.0
|
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
Quantum CSS notes
- Gecko有一个bug，当你在屏幕上对屏幕外的元素使用带有指定延时的动画时，Gecko不会在某些平台上重绘，例如Windows bug 1383239。这个问题已经在Firefox新的并行CSS引擎(也称为Quantum CSS 或者 Stylo，计划在Firefox 57中发布)中得到了解决。
- 另外一个Gecko bug，当我们激活<details>元素的动画效果时，即使通过 open 属性也不能将其展示(bug 1382124)。Quantum CSS会将其修复了。
- 另一个bug是，由于动画使用的是em单位，所以即使我们改变父元素的font-size属性也不会影响该动画元素(bug 1254424)，而它们原本应该受到影响。Quantum CSS会将其修复了。
更多
- Using CSS animations
- JavaScript
AnimationEventAPI