CSS 酷炫動畫是現代網頁設計中不可或缺的一部分。通過 CSS 動畫，我們可以為我們的網頁添加動態的效果，使其更加生動有趣。下面我們就來一起了解一些酷炫的 CSS 動畫。

/* 關鍵幀動畫 */
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
/* 使用關鍵幀動畫 */
.slide-in {
animation-name: slidein;
animation-duration: 3s;
}
/* 慣性滾動動畫 */
.scroll-inertia {
scroll-behavior: smooth;
overscroll-behavior: contain;
}
/* 使用滾動動畫 */
a[href^="#"] {
scroll-behavior: smooth;
}

關鍵幀動畫是指動畫中需要改變元素屬性在不同時間點的情況。上例中的 slidein 動畫會將元素從左側滑入頁面，并且在滿足一定的條件后滑動到中央。我們可以使用 animation-name 屬性給元素綁定對應的動畫名稱，使用 animation-duration 來設置動畫持續的時間。

慣性滾動動畫可以讓頁面的滾動效果更加平滑自然。通過設定 scroll-behavior 和 overscroll-behavior 這兩個屬性，我們可以改變網頁的滾動方式，并且防止一些用戶滾到過度滾動時產生的反彈效果。此外，我們還可以通過設定 a[href^="#"] 來在頁面內進行平滑滾動的設置。

以上僅僅是 CSS 動畫中的一部分，除此之外還有更多的 CSS 動畫效果值得探索。相信通過這些酷炫的動畫效果，我們可以為我們的網站設計添加更多的生動和魅力，吸引更多的用戶。