CSS動畫滑動是一種常見的Web動畫效果，它可以使頁面更具有生動感和交互性，吸引用戶的注意力。下面就來講一下如何使用CSS實現動畫滑動。

/* CSS代碼 */
.slide-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.slide-in.show {
opacity: 1;
transform: translateY(0);
}

以上是CSS代碼，我們來一一解析一下：

• 首先定義一個名為slide-in的class，其中設定元素的初始狀態opacity為0（即完全透明不可見）和transform為translateY(30px)（即在Y軸上向下偏移30像素）。
• 然后為該class設定一個過渡動畫效果，即當class被應用時，元素的opacity和transform屬性會在0.5秒鐘內進行漸變（即從0到1和從向下偏移30像素到0），過渡效果采用ease函數（即開始和結束時稍微慢一點，但在過程中速度較快）。
• 最后定義一個名為show的class（用來觸發動畫效果），其中元素的opacity為1（即完全不透明可見）和transform為translateY(0)（即恢復原始位置）。

接下來，我們來看一下如何將CSS動畫效果應用到HTML元素上：

/* HTML代碼 */

以上是HTML和JavaScript代碼，我們來一一解析一下：

• 首先在HTML頁面中定義一個class為container的div容器，其中包含兩個class為box和slide-in的元素（即兩個需要應用動畫的元素）。
• 然后在JavaScript代碼中使用querySelectorAll方法獲取所有class為box的元素，并定義一個名為slideIn的函數。
• 在slideIn函數中使用forEach遍歷所有box元素，獲取每個box元素的offsetTop和窗口高度windowHeight，判斷元素距離頂部的距離是否小于窗口高度，如果是，則為該元素添加class名為show（即觸發動畫效果）。
• 最后在window對象上添加scroll事件，并將slideIn函數添加為事件處理程序，以便在頁面滾動時觸發動畫效果。

以上就是使用CSS和JavaScript實現動畫滑動的整個過程，代碼簡單易懂，邏輯清晰明了，希望對大家有所幫助。