CSS3頁面切換動畫可以為網站帶來更加生動、有趣的用戶體驗。以下是幾個常見的CSS3頁面切換動畫效果。

/* 1. 淡入淡出 */
.fade{
animation: fade 1s ease;
}
@keyframes fade{
from {opacity: 0;}
to {opacity: 1;}
}
/* 2. 左右滑動 */
.slide{
animation: slide 1s ease;
}
@keyframes slide{
from {transform: translateX(-100%);}
to {transform: translateX(0);}
}
/* 3. 翻轉 */
.flip{
animation: flip 1s ease;
}
@keyframes flip{
from {transform: rotateY(180deg);}
to {transform: rotateY(0);}
}
/* 4. 縮放 */
.scale{
animation: scale 1s ease;
}
@keyframes scale{
from {transform: scale(0);}
to {transform: scale(1);}
}

以上是四個常見的CSS3頁面切換動畫效果，可以通過修改關鍵幀動畫的參數來調整動畫的速度、方向、變化等。