CSS3動畫是前端開發中不可或缺的一環，它極大地豐富了網頁的表現力，最大化地實現了視覺效果。下面我們通過一些例子來理解CSS3動畫的應用

/* fade-in效果 */
.fade-in {
animation: fade-in 1s;
-webkit-animation: fade-in 1s;
}
@keyframes fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@-webkit-keyframes fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
/* 旋轉效果 */
.rotate {
animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}
/* 彈跳效果 */
.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);
 }
}

上述代碼分別實現了淡入淡出、旋轉和彈跳效果。通過定義不同的關鍵幀，我們可以實現各種各樣的動畫效果。需要注意的是，在使用animation屬性時，我們需要為其指定一個持續時間。此外，對于某些低版本的瀏覽器，需要添加前綴-webkit-以支持CSS3動畫。