CSS3動畫是一種令人驚嘆的前端技術，通過優雅而靈活的代碼實現視覺效果，可以為我們的網站增添生動的元素。以下是一些令人驚喜的好玩CSS3動畫。

.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

這是一個簡單的淡入動畫，當元素加載時，它將通過漸變動畫從不透明度為0到1。這個動畫使用了CSS3中的關鍵幀（keyframes）和動畫（animation），使得動畫變得非常簡單易懂。

.rotate {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

這個動畫讓元素瘋狂旋轉，在頁面上添加了一些減輕壓力的元素。animation屬性的值是spin關鍵幀動畫，其中旋轉角度從0到360度，需要無限循環。

.bounce {
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}

這個動畫讓元素像彈簧一樣反彈，有一個漸變效果。它使用關鍵幀動畫，從0%到100%設置動畫中止。具體的行為是在40%開始反彈，之后在20%，50%，80%，100%的時間點回到原點，60%時間點開始向上彈一點距離。

總之，CSS3動畫在網站設計和開發中是非常有用的工具。通過它們，我們可以提高用戶體驗，并在頁面上添加出色的元素。