CSS中的animation属性可用于为许多其他CSS属性设置动画，例如颜色，背景色，高度或宽度。 每个动画都需要使用@keyframes这种at-rule语句定义，然后使用animation属性来调用它，如下所示：
.element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style>
.element {
width: 100%;
height: 100%;
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
html,
body {
height: 100%;
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
每个@keyframes的 at-rule CSS语句规则都定义了在动画过程中的特定时刻应该发生的情况。 例如，0%是动画的开始，而100%是动画的结束。可以通过简写animation属性或它的八个子属性控制这些关键帧，以更好地控制应该如何操纵这些关键帧。
子属性
animation-name：声明要操纵的@keyframes规则的名称。
animation-duration：动画完成一个周期所需的时间。
animation-timing-function：建立预设的加速曲线，例如缓动或线性。
animation-delay：加载元素到动画序列开始之间的时间。
animation-direction：设置循环后动画的方向。 其默认值在每个周期重置。
animation-iteration-count：应该执行动画的次数。
animation-fill-mode：设置在动画之前/之后应用的值。
例如，您可以将动画的最后状态设置为保留在屏幕上，或者可以将其设置为切换回动画开始之前的状态。
animation-play-state：暂停/播放动画。
可以如下面所示使用这些子属性：
@keyframes stretch {
/* 这里声明动画动作 */
}
.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/* 等同于*/
.element {
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style>
.element {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: orange;
}
100% {
transform: scale(1.5);
background-color: yellow;
}
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
以下是这些子属性中每个属性可以采用的值的完整列表：
animation-timing-function | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
animation-duration | Xs or Xms |
animation-delay | Xs or Xms |
animation-iteration-count | X |
animation-fill-mode | forwards, backwards, both, none |
animation-direction | normal, alternate |
animation-play-state | paused, running, running |
多个步骤
如果动画具有相同的开始和结束属性，则在@keyframes中用逗号分隔0%和100%值很有用：
@keyframes pulse {
0%, 100% {
background-color: yellow;
}
50% {
background-color: red;
}
}
多个动画
您也可以用逗号分隔值，以在选择器上声明多个动画。 在下面的示例中，我们想在@keyframe中更改圆的颜色，同时还要将其与另一边左右轻轻一碰。
.element {
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
}
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style>
.element {
height: 400px;
width: 400px;
background-color: red;
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
border-radius: 100%;
}
@keyframes pulse {
0%,
100% {
background-color: red;
}
50% {
background-color: orange;
}
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
性能
对大多数属性进行动画处理是性能方面的考虑，因此在对任何属性进行动画处理之前，我们应谨慎行事。 但是，可以安全地对某些组合进行动画处理：
transform: translate()
transform: scale()
transform: rotate()
opacity
哪些属性可以设置动画?
MDN有一个可以设置动画的CSS属性列表。 可设置动画的属性倾向于颜色和数字。 不可动画属性的一个示例是背景图像。