CSS動畫案例大全是一個非常棒的網站，里面收錄了很多有趣、實用的CSS動畫效果，不僅有基礎的動畫效果，也有更加復雜、特別的動畫效果。下面，我們來看一些 CSS動畫案例大全中的經典案例。

/* 一些基礎的動畫效果 */
/* 1. 漸變動畫 */
.box {
opacity: 0;
transition: opacity .5s ease;
}
.box:hover {
opacity: 1;
}
/* 2. 縮放動畫 */
.box {
transform: scale(0);
transition: transform .5s ease;
}
.box:hover {
transform: scale(1);
}
/* 3. 旋轉動畫 */
.box {
transform: rotate(0);
transition: transform .5s ease;
}
.box:hover {
transform: rotate(180deg);
}
/* 4. 移動動畫 */
.box {
transform: translateX(0);
transition: transform .5s ease;
}
.box:hover {
transform: translateX(100px);
}
/* 一些特別的動畫效果 */
/* 1. 球體滾動動畫 */
.ball {
animation: rollBall 2s linear infinite;
}
@keyframes rollBall {
0% { transform: rotateX(0); }
100% { transform: rotateX(360deg); }
}
/* 2. 翻轉動畫 */
.flip {
transform-style: preserve-3d;
transition: transform .5s;
}
.flip:hover {
transform: rotateY(180deg);
}
/* 3. 飛入動畫 */
.flyIn {
animation: flyInFromBottom .5s ease;
}
@keyframes flyInFromBottom {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* 4. 發光動畫 */
.glow {
animation: glow .5s ease infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 10px white;
}
to {
box-shadow: 0 0 20px white;
}
}

以上就是一些 CSS動畫案例大全中比較經典的動畫案例，它們展示了 CSS動畫的無限可能性，可以實現各種各樣的動畫效果，為網頁增添生動、有趣的元素。