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屬性列表。 可設置動畫的屬性傾向於顏色和數字。 不可動畫屬性的一個示例是背景圖像。