animate.css 是一個非常流行的 CSS 動畫庫，使用它可以輕松實現各種炫酷的頁面效果。 其中，滾動效果是 animate.css 中常用的一種效果，通過使用 animation 和 keyframes 帶來不同的響應式效果。如下代碼，我們可以實現在頁面滾動到特定位置時，元素從底部彈出的效果。

.scroll-animation {
opacity: 0;
animation: slideInUp 0.5s ease-in-out forwards;
}
@keyframes slideInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.scroll-animation {
animation: none !important;
}
}

以上代碼中的 .scroll-animation 類，是我們需要實現滾動效果的元素，使用 opacity 屬性隱藏了元素，animation 屬性觸發 slideInUp 動畫，并且使用 forwards 參數讓元素在動畫結束時保持最終狀態（即可見）。

@keyframes 中定義了 slideInUp 動畫，從頁面底部向上滑入元素。0% 和 100% 表示動畫起止時刻，transform 屬性是用來改變元素位置、形狀等的 CSS 屬性，translate3d(0, 100%, 0) 表示將元素移動到頁面底部。這樣動畫播放時就會從底部彈出。

最后，為了增加頁面的可訪問性，我們使用 @media (prefers-reduced-motion: reduce) 媒體查詢來禁止動畫，在用戶設備設置中開啟了 "減少動態界面" 的選項時，仍然可以良好的展示頁面。