CSS3引入了變換、過渡和動畫特性，使得網頁可以呈現出豐富的視覺效果和交互體驗。通過這些新特性，開發者可以創建復雜的動畫效果，而不需要使用JavaScript。
4.1 變換（Transforms）
變換允許開發者對元素進行旋轉、縮放、傾斜和平移操作。這些變換可以單獨使用，也可以組合使用。
4.1.1 旋轉（Rotate）
rotate 變換用于旋轉元素。可以指定旋轉的角度，正值表示順時針旋轉，負值表示逆時針旋轉。
/* 旋轉元素45度 */
.element {transform: rotate(45deg);
}
4.1.2 縮放（Scale）
scale 變換用于縮放元素。可以指定水平和垂直方向的縮放比例。
/* 縮放元素為原始大小的兩倍 */
.element {transform: scale(2);
}/* 水平縮放兩倍，垂直縮放一半 */
.element {transform: scale(2, 0.5);
}
4.1.3 平移（Translate）
translate 變換用于平移元素。可以指定水平和垂直方向的位移。
/* 水平平移50px，垂直平移100px */
.element {transform: translate(50px, 100px);
}
4.1.4 傾斜（Skew）
skew 變換用于傾斜元素。可以指定水平和垂直方向的傾斜角度。
/* 水平傾斜30度 */
.element {transform: skewX(30deg);
}/* 垂直傾斜30度 */
.element {transform: skewY(30deg);
}/* 同時進行水平和垂直傾斜 */
.element {transform: skew(30deg, 20deg);
}
4.1.5 組合變換
可以將多種變換組合在一起使用。
/* 平移元素50px并旋轉45度 */
.element {transform: translate(50px) rotate(45deg);
}
4.2 過渡（Transitions）
過渡允許元素屬性的變化在一段時間內平滑進行，提供了流暢的視覺效果。
4.2.1 定義過渡
transition 屬性用于定義元素屬性變化時的過渡效果。
/* 定義所有屬性的過渡效果，持續時間為0.3秒，使用ease緩動效果 */
.element {transition: all 0.3s ease;
}
4.2.2 指定過渡屬性
可以指定特定屬性的過渡效果。
/* 定義背景顏色和寬度的過渡效果 */
.element {transition: background-color 0.3s ease, width 0.3s ease;
}
4.2.3 過渡效果示例
通過過渡效果改變背景顏色。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>過渡效果示例</title>
<style>
.box {width: 100px;height: 100px;background-color: red;transition: background-color 0.5s ease;
}.box:hover {background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4.3 動畫（Animations）
CSS3動畫允許開發者通過定義關鍵幀動畫來創建復雜的動畫效果。
4.3.1 @keyframes規則
@keyframes 規則用于定義動畫。關鍵幀指定了動畫過程中不同時間點的樣式。
@keyframes example {0% {background-color: red;left: 0px;}100% {background-color: yellow;left: 100px;}
}
4.3.2 應用動畫
animation 屬性用于將動畫應用到元素上。
/* 應用動畫，持續時間為5秒，循環播放 */
.element {animation: example 5s infinite;
}
4.3.3 動畫屬性
animation-name: 動畫名稱，與@keyframes定義的名稱一致。animation-duration: 動畫持續時間。animation-timing-function: 動畫緩動效果，如ease、linear等。animation-delay: 動畫開始前的延遲時間。animation-iteration-count: 動畫循環次數，可以是數值或infinite。animation-direction: 動畫播放方向，可以是normal、reverse、alternate等。
4.3.4 動畫示例
創建一個移動和改變背景顏色的動畫。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>動畫示例</title>
<style>
@keyframes moveAndChange {0% {background-color: red;transform: translateX(0);}50% {background-color: yellow;transform: translateX(100px);}100% {background-color: green;transform: translateX(200px);}
}.box {width: 100px;height: 100px;background-color: red;animation: moveAndChange 4s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4.3.5 動畫性能優化
為了確保動畫流暢運行，可以采取以下措施優化動畫性能：
- 使用硬件加速：通過使用
transform和opacity屬性，可以利用GPU加速渲染。 - 簡化動畫：避免過多復雜的動畫效果，減少動畫幀數。
- 控制動畫數量：避免同時運行過多動畫，確保動畫的響應速度。
- 使用適當的緩動函數：選擇適當的緩動函數，使動畫更加自然流暢。
通過本章的學習，讀者應該對CSS3中的變換、過渡與動畫有一個深入的了解，并能夠在實際開發中靈活應用這些特性。接下來，我們將深入探討CSS3中的彈性布局和網格布局。
