動畫相關的CSS屬性
本文解釋了與動畫相關的CSS屬性。
你可以學習有關 @keyframes、animation 和 transition 屬性的用法和語法。
YouTube Video
預覽的HTML
css-animation.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-animation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Animation</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Animation Related Properties</h2>
20 </header>
21 <article>
22 <h3>@keyframes</h3>
23 <section>
24 <h4>Animation Examples</h4>
25 <header><h4>animation: slide 3s ease infinite</h4></header>
26 <section class="sample-view">
27 <div class="box-animation-slide">Slide Box</div>
28 </section>
29 <header><h4>animation: color-change 3s ease infinite</h4></header>
30 <section class="sample-view">
31 <div class="box-animation-color-change">Color Change Box</div>
32 </section>
33 <header><h4>animation: fade 3s ease infinite</h4></header>
34 <section class="sample-view">
35 <div class="box-animation-fade">Fade Box</div>
36 </section>
37 </section>
38 </article>
39 <article>
40 <h3>animation</h3>
41 <section>
42 <h4>Animation Examples</h4>
43 <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44 <section class="sample-view">
45 <div class="box-animation-ease-in-out">Slide Box</div>
46 </section>
47 <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48 <section class="sample-view">
49 <div class="box-animation-alternate">Color Change Box</div>
50 </section>
51 </section>
52 </article>
53 <article>
54 <h3>transition</h3>
55 <section>
56 <h4>Transition Examples</h4>
57 <header><h4>transition: background-color 2s ease</h4></header>
58 <section class="sample-view">
59 <div class="transition-box">Hover me!</div>
60 </section>
61 <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62 <section class="sample-view">
63 <div class="transition-2-properties">Hover me!</div>
64 </section>
65 </section>
66 </article>
67 </main>
68</body>
69</html>動畫與過渡
@keyframes 規則
1/* Animation definition */
2@keyframes slide {
3 0% {
4 transform: translateX(0);
5 }
6 50% {
7 transform: translateX(200px);
8 }
9 100% {
10 transform: translateX(0);
11 }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16 width: 100px;
17 height: 100px;
18 background-color: skyblue;
19 animation: slide 3s ease infinite;
20}@keyframes 用於CSS動畫中，以指定動畫期間樣式如何變化。在 @keyframes 中，通過時間百分比或關鍵字 (from 和 to) 指定動畫從開始到結束的樣式變化。
- 以下是一個動畫的示例，其中元素從左滑動到右再回到初始位置。
- 在此示例中，
slide寫在@keyframes後，定義了一個名為slide的動畫。 0%是動畫的開始，使用translateX(0)將元素定位在其初始位置。50%是動畫的中間階段，元素通過使用translateX(200px)向右移動了200像素。100%是動畫的結束，元素回到其初始位置。- 在
box-animation-slide類中，使用animation屬性以3秒的間隔應用slide動畫。
1@keyframes color-change {
2 0% {
3 background-color: red;
4 }
5 25% {
6 background-color: blue;
7 }
8 50% {
9 background-color: green;
10 }
11 75% {
12 background-color: yellow;
13 }
14 100% {
15 background-color: red;
16 }
17}
18
19.box-animation-color-change {
20 width: 100px;
21 height: 100px;
22 background-color: skyblue;
23 animation: color-change 3s ease infinite;
24}- 你可以精細地控制動畫中的樣式變化。通過指定百分比，你可以在任意時間點應用不同的樣式。
- 在此示例中，顏色從紅色逐漸變化為藍色、綠色、黃色，然後回到紅色。
1@keyframes fade {
2 from {
3 opacity: 0;
4 }
5 to {
6 opacity: 1;
7 }
8}
9
10.box-animation-fade {
11 width: 100px;
12 height: 100px;
13 background-color: blue;
14 animation: fade 3s ease infinite;
15}- 在此示例中，
from等同於0%，而to等同於100%。這讓你能夠定義簡單的動畫。
基本語法
1@keyframes animation-name {
2 0% {
3 /* Style at the start */
4 }
5 50% {
6 /* Style at the midpoint */
7 }
8 100% {
9 /* Style at the end */
10 }
11}animation-name：動畫的名稱。這是透過animation屬性或animation-name屬性來指定的。- 百分比或關鍵字：使用
0%到100%的百分比，或者關鍵字from（等同於0%）和to（等同於100%）。
animation 屬性
1.box-animation-ease-in-out {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: slide 3s ease-in-out infinite;
6}animation 屬性用於為元素添加動畫效果。動畫定義了一組 CSS 樣式如何隨時間變化。使用 animation 屬性，你可以控制動畫的時序、行為、延遲、重複次數等。
box-animation-ease-in-out類別將slide指定為animation-name，並使用在@keyframes中定義的slide動畫。3s是animation-duration，表示每個動畫週期在 3 秒內完成。ease-in-out是animation-timing-function，表示動畫從慢開始，加速，並在結束時再次減速。infinite是animation-iteration-count，表示動畫會無限次重複。
1.box-animation-alternate {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: color-change 3s ease-in-out 1s 3 alternate;
6}box-animation-alternate類別將color-change指定為animation-name，並使用在@keyframes中定義的color-change動畫。ease-in-out後的1s是animation-delay，表示動畫開始之前的延遲時間。動畫將在 1 秒後開始。1s後的3是animation-iteration-count，表示動畫重複 3 次。alternate是animation-direction，表示動畫播放的方向。alternate表示動畫將交替播放。
animation 屬性的組成
animation 屬性是一個簡寫屬性，將多個子屬性結合為一個。以下是主要的子屬性：。
animation-name屬性：指定要應用的動畫名稱。它必須與在@keyframes中定義的動畫名稱匹配。animation-duration屬性：指定動畫完成一個週期所需的時間。時間單位為秒（s）或毫秒（ms）。animation-timing-function屬性：指定動畫的速度曲線。可以使用例如ease、linear、ease-in、ease-out、ease-in-out等值。- 指定
ease表示動畫從慢開始，加速，並在結束時再次減速。 - 指定
linear表示動畫從開始到結束以恆定速度進行。 - 指定
ease-in使動畫以緩慢的速度開始，然後迅速結束。 - 指定
ease-out使動畫以快速的速度開始，然後緩慢結束。 - 指定
ease-in-out使動畫以緩慢的速度開始，快速進行，然後緩慢結束。
- 指定
animation-delay屬性指定動畫開始之前的延遲時間。時間單位可以是秒（seconds）或毫秒（milliseconds）。animation-iteration-count屬性指定動畫應重複的次數。指定infinite將使動畫無限次重複。animation-direction屬性指定動畫播放的方向。選項包括normal（正方向）、reverse（反方向）、alternate（交替播放）和alternate-reverse（從反方向開始交替播放）。animation-fill-mode屬性指定動畫在開始之前和結束之後的狀態。您可以指定none、forwards、backwards或both中的任一選項。animation-play-state屬性指定動畫是在運行中還是已暫停。您可以指定running或paused。
總結
animation 屬性是一個強大的工具，可用於動態更改元素樣式。使用 @keyframes，您可以定義樣式如何隨時間變化，並使用 animation 的各個子屬性控制動畫的詳細行為。
transition 屬性
1.transition-box {
2 background-color: lightgray;
3 transition: background-color 2s ease;
4}
5
6.transition-box:hover {
7 background-color: steelblue;
8}
9
10.transition-2-properties {
11 background-color: lightgray;
12 width: 150px;
13 height: 50px;
14 transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18 background-color: blue;
19 width: 250px;
20}transition 屬性用於為 CSS 樣式的變化應用動畫效果。它允許在狀態變化（如 hover、focus、active）或 JavaScript 動態更改樣式時，變化看起來更加平滑。
讓我們看一個關於 transition-box 類別的例子，在鼠標懸停於按鈕上時，背景顏色會平滑地變化。
- 在 transition-box 類別中，transition 屬性為背景顏色的變化應用了 2 秒的過渡效果。變化被指定為 ease，使其平滑。
- hover 偽類在鼠標懸停於按鈕上時，將背景顏色從 lightgray 更改為 steelblue。此變化將按照 transition-box 類別中指定的 2 秒時間平滑地進行。
可以同時將 transition 應用於多個屬性。
- 在 transition-2-properties 類別的例子中，背景顏色在 5 秒內改變，寬度則在 0.5 秒內改變。
基本語法
1/* Basic syntax of transition */
2transition: property duration timing-function delay;property指定了動畫應該應用到哪些 CSS 屬性。指定all將動畫應用於所有屬性。duration指定動畫完成所需的時間。請使用秒（s）或毫秒（ms）來指定。timing-function指定動畫速度的變化方式。您可以使用ease、linear、ease-in、ease-out、ease-in-out等選項。delay指定動畫開始前的延遲時間。以秒或毫秒來指定。
transition 的詳細屬性
1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;transition 也可以以以下個別屬性的形式使用。
transition-property：指定套用動畫的屬性。transition-duration：指定動畫完成所需的時間。transition-timing-function：指定動畫的變化速度。可以使用ease、linear、ease-in、ease-out、ease-in-out等選項。transition-delay：指定動畫開始前的延遲時間。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。