CSS3 動畫是網頁設計中不可或缺的一部分，它可以為頁面增加生動的效果和更好的用戶體驗。下面介紹十二種常用的 CSS3 動畫效果：

1. 旋轉動畫
/* 順時針旋轉 */
transform: rotate(45deg);
/* 逆時針旋轉 */
transform: rotate(-45deg);
2. 縮放動畫
/* 放大效果 */
transform: scale(1.5);
/* 縮小效果 */
transform: scale(0.5);
3. 位移動畫
/* 向右平移 100px */
transform: translateX(100px);
/* 向下平移 100px */
transform: translateY(100px);
4. 淡入淡出動畫
/* 淡出效果 */
opacity: 0;
/* 淡入效果 */
opacity: 1;
5. 幀動畫
/* 定義幀動畫 */
@keyframes spin {
0% {transform: rotate(0)}
100% {transform: rotate(360deg)}
}
/* 使用幀動畫 */
animation: spin 2s linear infinite;
6. 閃爍動畫
/* 閃爍效果 */
animation: blink 1s linear infinite;
@keyframes blink {
0% {opacity: 1}
50% {opacity: 0}
100% {opacity: 1}
}
7. 跳躍動畫
/* 豎直方向上跳起來 */
animation: jump 1s ease-in-out infinite;
@keyframes jump {
0%, 100% {transform: translateY(0)}
50% {transform: translateY(-30px)}
}
8. 左右交替動畫
/* 左右交替移動 */
animation: side-to-side 1s ease-in-out infinite;
@keyframes side-to-side {
50% {transform: translateX(-50px)}
100% {transform: translateX(0)}
}
9. 光暈動畫
/* 光暈效果 */
animation: halo 1s ease-in-out infinite;
@keyframes halo {
0% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7)}
40% {box-shadow: 0 0 0 20px rgba(255, 255, 255, 0)}
80% {box-shadow: 0 0 0 40px rgba(255, 255, 255, 0)}
100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)}
}
10. 爆炸動畫
/* 爆炸效果 */
animation: explode 0.5s ease-in-out;
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
box-shadow: none;
}
100% {
transform: scale(1.5);
opacity: 0;
box-shadow: 0px 0px 50px #ff0000;
}
}
11. 翻轉動畫
/* 翻轉效果 */
animation: flip 1s linear infinite;
@keyframes flip {
0% {transform: perspective(400px) rotateY(0)}
100% {transform: perspective(400px) rotateY(360deg)}
}
12. 波浪動畫
/* 波浪效果 */
animation: wave 1s ease-in-out infinite;
@keyframes wave {
0% {transform: translateX(0) translateY(0)}
50% {transform: translateX(25px) translateY(-10px)}
100% {transform: translateX(0) translateY(0)}
}