現在我們來學習一些關于翻頁觸發CSS動畫的技巧。假設我們有一個頁面，這個頁面上有許多不同的元素，包括一些圖片和一些文本。我們想要在用戶翻到每一頁時都觸發一些CSS動畫，這該怎么做呢？

第一步是使用JavaScript來檢測用戶何時翻動頁面。可以使用jQuery的scroll和resize事件來檢測滾動和窗口大小的變化。當檢測到滾動時，我們可以獲取當前頁面的位置和大小，然后計算頁面的頂部和底部坐標。如果用戶翻到了一個新的頁面，我們可以觸發一個自定義事件來通知頁面的其他部分。

var currentPage = 1;
$(window).on("scroll resize", function() {
var viewportHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var bottomOfPage = scrollTop + viewportHeight;
$("section").each(function(index, element) {
var $element = $(element);
var elementTop = $element.offset().top;
var elementBottom = elementTop + $element.outerHeight();
if (scrollTop<= elementTop && bottomOfPage >= elementBottom) {
var newPage = index + 1;
if (currentPage !== newPage) {
$(document).trigger("pageChange", [newPage]);
currentPage = newPage;
}
}
});
});

第二步是在CSS中定義與頁面相關的動畫。我們可以使用CSS動畫的@keyframes規則，它允許我們定義一系列關鍵幀，以及在每個關鍵幀中指定樣式屬性的值。例如，我們可以定義一個從上到下滑動的動畫：

@keyframes slideInDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.slide-in-down {
animation: slideInDown 1s ease both;
}

第三步是使用JavaScript來在頁面變化時觸發動畫。我們可以使用jQuery的on函數綁定自定義事件的處理程序。當我們接收到頁面變化事件時，我們可以使用jQuery的addClass函數將我們想要觸發動畫的元素添加一個類名。這個類名將觸發我們在CSS中定義的動畫。

$(document).on("pageChange", function(event, page) {
$(".page" + page + " .animate").addClass("slide-in-down");
});

最后，我們需要在HTML中給我們想要觸發動畫的元素添加一個類名，以便它們能夠和JavaScript和CSS進行交互。通常，我們可以給每個頁面和每個獨立的元素都添加一個類名，這樣我們就可以精確地控制頁面上的每個動畫。

總而言之，這些技巧可以幫助我們輕松地實現漂亮的頁面過渡和動畫效果。