CSS中的動畫一直都是網頁設計與開發中的重要元素，可以讓頁面更具生命力和活力。其中滾動動畫是一種很常見的元素，可以帶來更好的視覺體驗，讓用戶更加沉浸其中。

/* 創建動畫 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 設置元素的初始樣式 */
.fadeInUp {
opacity: 0;
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
}

在上述代碼中，我們創建了一個名為fadeInUp的動畫，即元素向上淡入的動畫。首先設置了動畫的起始位置和結束位置，包括元素的不透明度和位移。然后通過設置.fadeInUp的樣式來應用該動畫，并設置了動畫持續時間和填充模式。

接下來，我們需要觸發這個動畫，讓它隨著用戶的滾動而執行：

/* 當元素出現在視窗中時觸發 */
.fadeInUp {
opacity: 0;
animation-name: none;
animation-fill-mode: none;
}
.fade-in-up-visible {
opacity: 1;
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 0.2s;
}

在上述代碼中，我們給.fadeInUp設置了默認的樣式，而使用.fade-in-up-visible來觸發動畫。當元素出現在視窗中時，我們通過添加.fade-in-up-visible類來將其透明度設置為1并應用fadeInUp動畫。我們還為動畫添加了延遲效果，讓其在進入視窗后稍微等待一會兒再執行。

通過這些代碼，我們在CSS中實現了滾動時執行動畫的功能，帶來了更加流暢和生動的頁面效果。