CSS作為網(wǎng)頁設(shè)計中不可或缺的一部分，不僅可以讓網(wǎng)頁更美觀，還可以添加酷炫的動畫效果，給用戶帶來更好的體驗。下面就介紹幾種常見的CSS動畫效果。

// 旋轉(zhuǎn)動畫示例
.rotate {
width: 100px;
height: 100px;
background-color: #f00;
animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上面這段代碼實現(xiàn)了一個元素的旋轉(zhuǎn)動畫。首先定義.rotate樣式，定義其寬高和背景顏色，然后通過animation屬性來指定該元素應(yīng)用的動畫效果，即rotate。該動畫會在2秒內(nèi)執(zhí)行一次，并且設(shè)置為無限循環(huán)，直到頁面關(guān)閉。動畫效果的實現(xiàn)通過@keyframes規(guī)則完成，rotate規(guī)則定義了動畫執(zhí)行過程中元素旋轉(zhuǎn)的角度，0%對應(yīng)開始，100%對應(yīng)結(jié)束。

// 漸變動畫示例
.gradient {
width: 200px;
height: 200px;
background: linear-gradient(#f00, #00f);
background-size: 400% 400%;
-webkit-animation: gradient 8s ease infinite;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

上面這段代碼實現(xiàn)了一個元素的漸變動畫效果。首先定義.gradient樣式，定義其寬高和漸變背景顏色，該樣式中使用了background-size屬性，將背景大小設(shè)置為400%，使得動畫效果更加明顯。接著通過animation屬性指定該元素應(yīng)用的動畫效果，即gradient。該動畫將在8秒內(nèi)執(zhí)行，且循環(huán)無限次。動畫的實現(xiàn)通過@keyframes規(guī)則完成，gradient規(guī)則定義了動畫執(zhí)行過程中背景顏色的變化過程，每個百分比位置對應(yīng)不同的背景位置，達(dá)到了顏色的漸變效果。

以上就是兩種常見的CSS動畫效果，通過在自己的網(wǎng)頁設(shè)計中應(yīng)用這些效果，可以讓網(wǎng)頁更生動有趣。值得注意的是，在使用CSS動畫效果時應(yīng)注意合理性和適度，避免過度使用導(dǎo)致性能問題。