CSS3動畫特效越來越受到開發者的關注，以下是一些常見的CSS3動畫特效。

// 1. 放大動畫
.zoom-in {
animation: zoomin 1s;
}
@keyframes zoomin {
from {
transform: scale(0, 0);
}
to {
transform: scale(1, 1);
}
}
// 2. 縮小動畫
.zoom-out {
animation: zoomout 1s;
}
@keyframes zoomout {
from {
transform: scale(1, 1);
}
to {
transform: scale(0, 0);
}
}
// 3. 旋轉動畫
.rotate {
animation: rotate 1s infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// 4. 移動動畫
.move {
animation: move 1s;
}
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(100px, 100px);
}
}
// 5. 抖動動畫
.shake {
animation: shake 0.5s;
}
@keyframes shake {
from, to {
transform: translate(0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate(-10px, 0);
}
20%, 40%, 60%, 80% {
transform: translate(10px, 0);
}
}
// 6. 淡入動畫
.fadein {
animation: fadein 1s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
// 7. 淡出動畫
.fadeout {
animation: fadeout 1s;
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

以上是一些常見的CSS3動畫特效，可以根據需要進行調整和靈活運用，達到更好的視覺效果。