鼠標滾動觸發css動畫是一種常見的網頁設計技巧，它能為頁面帶來更生動的交互體驗。在前端開發中，可以使用JavaScript監聽鼠標滾動事件，然后根據滾動位置觸發不同的動畫效果。接下來，本文將介紹如何使用css實現鼠標滾動觸發動畫效果。

//html代碼
//css代碼
.box{
width: 100px;
height: 100px;
background-color: grey;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: move;
animation-duration: 5s;
animation-fill-mode: forwards;
visibility: hidden; 
}
@keyframes move{
from{
transform: translate(-50%, -50%);
visibility: hidden;
}
to{
transform: translate(-50%, -200%);
visibility: visible;
}
}

在上面的代碼中，我們創建了一個在頁面中居中并隱藏的box元素。

.box{
visibility: hidden;
}

接著，我們使用動畫效果將box元素從初始位置向上移動。

@keyframes move{
from{
transform: translate(-50%, -50%);
visibility: hidden;
}
to{
transform: translate(-50%, -200%);
visibility: visible;
}
}

其中，from表示動畫起點，to表示動畫終點。我們在from狀態下將box元素設為不可見，然后在to狀態下將其向上移動，并將其設為可見。

接下來，我們要使用JavaScript監聽鼠標滾動事件，并根據滾動位置觸發動畫效果。代碼如下：

const box = document.querySelector('.box');
window.addEventListener('scroll', () =>{
const scrollPos = window.scrollY + window.innerHeight;
const boxPos = box.offsetTop + box.clientHeight / 2;
if(scrollPos >= boxPos){
box.classList.add('animate__animated', 'animate__bounceInUp');
}
});

在上面的代碼中，我們使用querySelector方法獲取到box元素，并監聽了鼠標滾動事件。在每次鼠標滾動時，我們計算了頁面滾動位置和box元素位置，并當它們相同時觸發動畫效果。

最后，我們需要在HTML文件中引入animate.CSS文件來為box元素添加動畫效果。代碼如下：

通過鼠標滾動觸發CSS動畫，可以使網頁更加生動有趣，增加用戶的使用體驗，是現代Web設計中的重要技巧之一。