6.1 @keyframes 規則
CSS 動畫允許你用最小的努力創建複雜和平滑的視覺效果。創建 CSS 動畫的主要工具是
@keyframes 規則，它定義動畫的關鍵幀和在每個幀上應該發生的樣式變化。
@keyframes 規則用於創建動畫，定義在動畫執行過程中不同階段的 CSS 屬性更改。關鍵幀定義了在動畫過程中哪些時間點會應用哪些樣式。
語法 1：
@keyframes animation-name {
from {
/* 初始樣式 */
}
to {
/* 最終樣式 */
}
}
語法 2：
@keyframes animation-name {
0% {
/* 初始樣式 */
}
100% {
/* 最終樣式 */
}
}
其中：
from對應於動畫時間的0%to對應於動畫時間的100%
示例：平滑改變背景顏色
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
解釋：
@keyframes changeColor規則定義了動畫，將元素的背景顏色從lightblue改變為lightcoral- 在元素
.animated-box上的animation屬性指示動畫changeColor應持續 3 秒並無限次重複
6.2 多個關鍵幀
你可以使用多於兩個的關鍵幀來創建更複雜的動畫，定義中間狀態的樣式。
示例：對角線移動並改變顏色
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
解釋：
@keyframes moveAndChangeColor 規則定義了動畫，將在三個階段改變元素的背景顏色和位置。
- 在動畫時間的 0% 時，元素顏色為淺藍色，位於初始位置
- 在動畫時間的 50% 時，元素顏色變為淺綠色，並向右移動 100 像素，向下移動 100 像素
- 在動畫時間的 100% 時，元素顏色變為淺珊瑚色，並向右移動 200 像素
6.3 簡單動畫示例
示例 1: 脈衝效果
創建一個元素平滑放大和縮小的脈衝效果。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
解釋：
@keyframes pulse規則定義了動畫，使元素放大到 120%，然後返回到原始大小- 在元素
.pulse-box上的animation屬性指示動畫pulse應持續 2 秒並無限次重複
示例 2: 旋轉效果
創建元素不斷旋轉的效果：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
解釋：
@keyframes rotate規則定義了動畫，將元素從 0 度旋轉到 360 度-
在元素
.rotate-box上的animation屬性指示動畫rotate應持續 3 秒，無限次重複並以固定速度 (linear) 進行
GO TO FULL VERSION