純 CSS 滾動觸發動畫是一種很常見的網站動畫效果，它可以隨著用戶滾動頁面來觸發動畫，增加網站的視覺體驗。下面我們將介紹如何使用純 CSS 實現滾動觸發動畫。

/* 首先，我們需要定義動畫的樣式 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 接下來，我們定義要觸發動畫的元素 */
.text {
opacity: 0; /* 元素初始狀態為不可見 */
animation-name: fadeIn; /* 動畫名稱 */
animation-duration: 1s; /* 動畫持續時間 */
}
/* 最后，我們需要使用 JavaScript 來監聽用戶的滾動事件，當用戶滾動到元素出現的位置時，動畫就會觸發 */
window.addEventListener('scroll', function() {
var text = document.querySelector('.text');
var position = text.getBoundingClientRect();
/* 判斷元素是否出現在視圖中 */
if (position.top< window.innerHeight) {
text.classList.add('show');
}
});

代碼解釋：

1. 首先，我們定義了一個@keyframes動畫，它將從透明度 0 過渡到透明度 1，該動畫的名稱為fadeIn。

2. 接下來，我們定義了.text類型的元素，該元素的初始狀態為不可見，使用了fadeIn動畫，并指定了動畫的持續時間為 1 秒。

3. 最后，我們使用了 JavaScript 監聽了頁面滾動事件，當用戶滾動到元素出現的位置時，就會給該元素添加一個show類型的樣式，從而觸發動畫。

這就是一個簡單的純 CSS 滾動觸發動畫的實現方法，你可以根據實際需要進行調整和擴展。