地圖動畫是一種流行的效果，可以在網站上的交互式地圖中添加動態效果，提高用戶體驗。通過使用 CSS 和 JavaScript，可以實現各種類型的地圖動畫效果。其中，地圖動畫 CSS 是最常用的一種方法。

.mapboxgl-map {
animation: slide 1.5s ease-in-out infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}

上述代碼是一個基本的地圖動畫效果的 CSS 代碼塊。在這里，我們使用了一個 .mapboxgl-map 類，它包含了 CSS 動畫過渡的屬性。我們還定義了一個動畫名稱為 slide，它將在 1.5 秒內發生。我們使用了 ease-in-out 曲線以獲得流暢的轉換效果。

在動畫的 @keyframes 塊中，我們定義了動畫從 0% 到 100% 的過渡效果。它將通過使用 transform 屬性來移動地圖。在這里，我們使用了 translateX 函數，它將用于將地圖從左到右滑動。

除此之外，地圖動畫 CSS 還可以實現其他各種類型的動畫效果，例如縮放、旋轉、淡入淡出等。只需根據您的需求選擇合適的過渡效果即可。

.mapboxgl-map {
animation: zoom 2s ease-in-out infinite;
}
@keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

這里，我們定義了一個名為 zoom 的動畫，它將使地圖縮放。在動畫的 @keyframes 塊中，我們定義了動畫從 0% 到 100% 的過渡效果。50% 的時間里，地圖將放大到原來的 1.5 倍。其他時間將用于過渡效果的縮放。

在設計網站時，添加地圖動畫可以提高用戶體驗。能夠吸引用戶的注意力，同時也為地圖增加了動感效果。通過使用 CSS 和 JavaScript，我們可以實現各種類型的地圖動畫效果，使地圖更生動。