CSS網站動畫特效是現代網頁設計的重要組成部分。通過使用CSS動畫，可以讓網站更加生動有趣，吸引用戶的眼球，增強用戶的交互體驗。在這篇文章中，我們將討論一些常見的CSS網站動畫特效，并提供相應的代碼實例。

/* 1. 旋轉動畫 */
.box {
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 2. 縮放動畫 */
.box {
animation: scale 2s infinite ease-in-out;
}
@keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
/* 3. 淡入淡出動畫 */
.box {
animation: fade 2s infinite alternate;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 4. 彈跳動畫 */
.box {
animation: bounce 2s infinite ease-in-out;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* 5. 翻轉動畫 */
.box {
animation: flip 2s infinite ease-in-out;
}
@keyframes flip {
from {
transform: rotateX(0);
}
to {
transform: rotateX(180deg);
}
}

這些動畫效果可以通過在HTML代碼中的對應元素上應用CSS代碼來實現。其中animation屬性用于定義動畫細節，@keyframes規則用于定義動畫效果。

在使用CSS網站動畫特效時，應注意其在不同瀏覽器和設備上的兼容性，以及動畫的性能問題。

總的來說，CSS網站動畫特效可以為網站增添生動有趣的元素，增強用戶的交互體驗，但應當注意其合理使用，避免過度使用導致用戶疲勞和性能下降。