CSS 3 動畫是一種非常酷炫的效果，讓網頁的動態效果更加生動和豐富。下面介紹一些常用的 CSS 3 動畫效果。

/* 實現旋轉效果 */
.box{
animation: spin 2s linear infinite;
-webkit-animation: spin 2s linear infinite; /* Safari 和 Chrome */
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 實現彈跳效果 */
.box{
animation: bounce 1s ease infinite;   
-webkit-animation: bounce 1s ease infinite; /* Safari 和 Chrome */
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* 實現淡入淡出效果 */
.box{
animation: fade 1s ease infinite;   
-webkit-animation: fade 1s ease infinite; /* Safari 和 Chrome */
}
@keyframes fade {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}

以上是三個常用的 CSS 3 動畫效果。使用這些效果可以為網頁添加更加生動的動畫效果，增強用戶體驗。