CSS頁面切換動畫是網頁設計中常見的效果，當頁面進行跳轉時，動畫可以增加用戶的體驗感和頁面的流暢度。本文將介紹一些常見的CSS頁面切換動畫效果。

/*淡入淡出*/
.fade{
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.fade-out{
opacity: 0;
}

上述代碼可以實現淡入淡出的效果，當元素被隱藏時，透明度將變成0，導致元素消失。過度時間設置為0.3秒，效果緩慢顯示或隱藏。

/*滑動切換效果*/
.slide{
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
.slide-out{
transform: translateX(100%);
}

加入上述樣式將會出現跳轉時進行滑動效果。translateX（0）使元素保持在當前位置不變，而translateX（100%）表示將元素向右移動100%的距離。過渡時間設置為0.5秒。

/*縮放效果*/
.scale{
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
.scale-out{
transform: scale(0.8);
}

上述代碼呈現一種縮放效果，當元素隱藏時，元素將縮小至80％大小。過渡時間設置為0.3秒。

總之，在網頁設計中， 頁面切換動畫是重要組成部分。通過使用上述CSS樣式，可以為您的頁面添加漂亮的跳轉效果，增強用戶體驗。