在網頁設計中，動畫一直是一個非常重要的元素。它可以使網頁更加生動、有趣，同時也可以更好地展示內容。然而，對于許多網站來說，手動添加動畫并不容易。而 CSS 提供了一個非常不錯的方式，可以幫助你輕松地為網頁添加自動動畫。

/* CSS 樣式文件 */
@keyframes slidein {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.slide {
animation: slidein 2s ease-in-out;
}

上面的代碼使用了 keyframes 和 animation 兩個重要的 CSS 屬性。其中，keyframes 定義了動畫的關鍵幀，而 animation 則指定了動畫的執行方式。

在上面的代碼中，我們創建了一個名為 slidein 的 keyframe。我們將元素的不透明度和水平位置從左邊的 -100% 緩慢地變化到 0。通過為元素添加 .slide 類，我們使用 animation 屬性將我們的動畫應用到該元素上。所有添加了這個類的元素將在網頁一打開時運行動畫。

另外，我們也可以使用 animation-delay 屬性來控制動畫何時開始。比如，我們可以修改代碼，讓動畫在用戶滾動到某個特定元素時才開始：

/* CSS 樣式文件 */
@keyframes slidein {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.slide {
animation: slidein 2s ease-in-out;
animation-delay: 2s;
}

在上面的代碼中，我們添加了 animation-delay 屬性，并給它賦值為 2 秒。這意味著動畫將在頁面加載后的兩秒鐘后執行。

總的來說，CSS 提供了一種簡單且優雅的方式來為網頁添加動畫。通過使用 keyframes 和 animation 屬性，你可以輕松地為任何元素添加自動動畫，為你的網站添加流暢的效果和生動的元素。