CSS頁面滾動觸發動畫是指當用戶滾動頁面時，頁面上的某些元素會根據我們預先設定好的動畫效果在特定的位置和時間觸發相應的動作。

/* HTML結構 */
<div class="box"></div>
/* CSS樣式 */
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
opacity: 0;
transform: translateY(100px);
transition: all 1s ease-out;
}
.box.active {
opacity: 1;
transform: translateY(0);
}

在上面的代碼中我們首先定義了一個 .box 的 div 元素，并對它進行了一些基本樣式的設置，比如寬高、背景色、定位等等。接著，我們在 .box 類中設置了元素初始狀態下的透明度為 0，向下平移 100px，這樣就可以先將元素隱藏在屏幕中。最后，為了讓動畫效果更加平滑，我們在 .box 類中使用了 transition 過渡效果。

接下來我們需要使用 JavaScript 或 jQuery 來監聽用戶的滾動事件，一旦用戶滾動到我們預設的位置，則給該元素添加一個 .active 類，這樣就會觸發上面 CSS 中定義的動畫效果了。

/* jQuery代碼 */
$(window).on('scroll', function() {
if ($('.box').offset().top< $(window).scrollTop() + $(window).height()) {
$('.box').addClass('active');
}
});

在上面的代碼中，我們首先使用 jQuery 的 .on() 方法來監聽窗口的滾動事件，一旦用戶觸發了滾動事件，就會執行函數里面的代碼。在函數內部我們首先使用了 jQuery 的 .offset() 方法獲取了 .box 元素距離文檔頂部的距離，然后與當前窗口的滾動距離加上屏幕高度進行比較，如果 .box 元素已經滾動到了視野內，就可以給它添加 .active 類了。

通過上面的怎么代碼，我們就可以輕松地實現頁面滾動觸發動畫，讓用戶在瀏覽網頁時得到更加豐富、生動的體驗。