最佳答案
引言
CSS動畫是現代網頁計劃中弗成或缺的一部分，它可能為網頁帶來活潑的靜態後果，晉升用戶休會。本教程將經由過程一系列實例，幫助讀者從零開端，控制CSS動畫的核心不雅點跟實戰技能，打造炫酷的網頁殊效。
一、CSS動畫基本
1.1 關鍵幀（@keyframes）
關鍵幀是CSS動畫的核心，它定義了動畫的肇端狀況、旁邊狀況跟結束狀況。以下是一個簡單的關鍵幀示例：
@keyframes example {
0% { background-color: red; width: 100px; height: 100px; }
50% { background-color: yellow; width: 200px; height: 200px; }
100% { background-color: green; width: 100px; height: 100px; }
}
1.2 animation屬性
animation屬性用於將關鍵幀定義的動畫利用到HTML元素上。以下是一個簡單的animation屬性示例：
div {
animation-name: example;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
}
二、實戰案例分析
2.1 淡入動畫
淡入動畫是一種罕見的網頁動畫後果，以下是一個簡單的淡入動畫實例：
.fade-in {
animation-name: fadeIn;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
HTML構造：
<div class="fade-in">淡入動畫</div>
2.2 縮放動畫
縮放動畫可能使元素縮小或縮小，以下是一個簡單的縮放動畫實例：
.scale {
animation-name: scale;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes scale {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
HTML構造：
<div class="scale">縮放動畫</div>
2.3 旋滾動畫
旋滾動畫可能使元素繞着核心點扭轉，以下是一個簡單的旋滾動畫實例：
.rotate {
animation-name: rotate;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
HTML構造：
<div class="rotate">旋滾動畫</div>
三、過渡（transition）
過渡後果容許CSS屬性值在一準時光內膩滑地改變，從而創建動畫後果。以下是一個簡單的過渡後果實例：
button {
transition: background-color 0.5s ease;
}
button:hover {
background-color: #f00;
}
四、總結
經由過程本教程，讀者可能控制CSS動畫的核心不雅點跟實戰技能，打造炫酷的網頁殊效。在現實開辟中，可能根據項目須要，機動應用CSS動畫，為用戶帶來更好的視覺休會。