/

CSS動畫教程

CSS動畫教程

CSS動畫是創建視覺動畫的絕佳方式，不僅限於CSS過渡的單一移動，而且更加細緻。使用 animation 屬性將動畫應用於元素

介紹

使用 animation 屬性將動畫應用於元素。

1
2
3
.container {
 animation: spin 10s linear infinite;
}

spin 是動畫的名稱，我們需要單獨定義它。我們還告訴CSS使動畫持續10秒，以線性方式執行（速度不加速或有任何差異），並無限重複播放。

您必須使用 關鍵幀（keyframes） 定義動畫的工作方式。以下是旋轉項目的動畫示例：

1
2
3
4
5
6
7
8
@keyframes spin {
 0% {
 transform: rotateZ(0);
 }
 100% {
 transform: rotateZ(360deg);
 }
}

在 @keyframes 定義中，您可以擁有任意多個中間點。

在這種情況下，我們告訴CSS將變換屬性將Z軸從0度旋轉到360度，完成完整的循環。

您可以在此處使用任何CSS變換。

請注意，這並不影響動畫應該持續的時間間隔。這是在使用 animation 時定義的。

CSS動畫示例

我想畫出四個圓，起點都在一個公共點，彼此相距90度。

1
2
3
4
5
6
<div class="container">
 <div class="circle one"></div>
 <div class="circle two"></div>
 <div class="circle three"></div>
 <div class="circle four"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
body {
 display: grid;
 place-items: center;
 height: 100vh;
}

.circle {
 border-radius: 50%;
 left: calc(50% - 6.25em);
 top: calc(50% - 12.5em);
 transform-origin: 50% 12.5em;
 width: 12.5em;
 height: 12.5em;
 position: absolute;
 box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5);
}

.one,
.three {
 background: rgba(142, 92, 205, 0.75);
}

.two,
.four {
 background: rgba(236, 252, 100, 0.75);
}

.one {
 transform: rotateZ(0);
}

.two {
 transform: rotateZ(90deg);
}

.three {
 transform: rotateZ(180deg);
}

.four {
 transform: rotateZ(-90deg);
}

您可以在這個Glitch中看到它們: https://glitch.com/edit/#!/flavio-css-circles

讓我們使這個結構（所有圓圈）旋轉。為此，我們在容器上應用一個旋轉為360度的動畫：

1
2
3
4
5
6
7
8
9
10
11
12
@keyframes spin {
 0% {
 transform: rotateZ(0);
 }
 100% {
 transform: rotateZ(360deg);
 }
}

.container {
 animation: spin 10s linear infinite;
}

在 https://glitch.com/edit/#!/flavio-css-animations-tutorial 上查看它

您可以添加其他關鍵幀以獲得更有趣的動畫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes spin {
 0% {
 transform: rotateZ(0);
 }
 25% {
 transform: rotateZ(30deg);
 }
 50% {
 transform: rotateZ(270deg);
 }
 75% {
 transform: rotateZ(180deg);
 }
 100% {
 transform: rotateZ(360deg);
 }
}

在 https://glitch.com/edit/#!/flavio-css-animations-four-steps 上查看示例

CSS動畫屬性

CSS動畫提供了許多不同的參數可以進行調整：

屬性 描述
animation-name 動畫的名稱，引用使用 @keyframes 創建的動畫
animation-duration 動畫持續時間，以秒為單位
animation-timing-function 動畫使用的時間函數（常見值：linear，ease）。默認值：ease
animation-delay 開始動畫之前等待的秒數，可選
animation-iteration-count 動畫應該重複執行的次數。可以是數字或“無窮”。默認值：1
animation-direction 動畫的方向。可以是normal，reverse，alternate或alternate-reverse。在後兩者中，它在前進後退之間交替
animation-fill-mode 定義在動畫結束後，按照其迭代計數數量完成後如何設置元素的樣式。none 或 backwards 回到第一個關鍵幀的樣式。forwards 和 both 使用在最後關鍵幀中設置的樣式
animation-play-state 如果設置為 paused，則暫停動畫。默認值為 running

animation 屬性是所有這些屬性的縮寫，按照以下順序進行：

1
2
3
4
.container {
 animation: name duration timing-function delay iteration-count direction
 fill-mode play-state;
}

這是我們上面使用的示例：

1
2
3
.container {
 animation: spin 10s linear infinite;
}

用於CSS動畫的JavaScript事件

使用JavaScript可以（監聽）以下事件：

  • animationstart
  • animationend
  • animationiteration

請小心使用 animationstart ，因為如果動畫在頁面加載時開始，您的JavaScript代碼始終在CSS處理後執行，因此動畫已經開始，並且無法攔截事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const container = document.querySelector('.container')
container.addEventListener(
 'animationstart',
 (e) => {
 //做某事
 },
 false
)
container.addEventListener(
 'animationend',
 (e) => {
 //做某事
 },
 false
)
container.addEventListener(
 'animationiteration',
 (e) => {
 //做某事
 },
 false
)

可以使用CSS動畫來製作的屬性

非常多！它們與CSS過渡中可以動畫的屬性相同。

以下是完整的列表：

屬性
background
background-color
background-position
background-size
border
border-color
border-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
caret-color
clip
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
content
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-weight
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column-end
grid-column-gap
grid-column-start
grid-column
grid-gap
grid-row-end
grid-row-gap
grid-row-start
grid-row
grid-template-areas
grid-template-columns
grid-template-rows
grid-template
grid
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
quotes
right
tab-size
text-decoration
text-decoration-color
text-indent
text-shadow
top
transform.
vertical-align
visibility
width
word-spacing
z-index