CSS動畫效果是網絡設計中不可或缺的部分，可以為網站帶來生動有趣的視覺效果。

/* 示例1-紅色圓點跳動 */
#animation1 {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
animation: jump 1s ease-in-out infinite;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
/* 示例2-漸變背景色鼠標移過 */
#animation2 {
width: 200px;
height: 50px;
background: linear-gradient(90deg, #ff0000, #00ff00);
transition: background 0.5s ease-out;
}
#animation2:hover {
background: linear-gradient(90deg, #00ff00, #ff0000);
}

除了上述兩個示例，還有很多其他的CSS動畫效果可供選擇，例如旋轉、縮放、淡入淡出等等。使用CSS動畫效果需要記住一些要點：

• 逐幀動畫使用@keyframes關鍵字定義
• 指定動畫的過渡時間、時間函數等屬性
• 應用動畫的元素需要設置animation屬性
• 可以使用transfrom屬性控制元素的旋轉、縮放等效果

通過大量的練習和實踐，設計師可以熟練地運用各種CSS動畫效果，為網站設計帶來更多驚喜和活力。