最近，在我的網站上添加了一些CSS動畫效果。然而，我發現一個問題：當我通過滾動網頁使動畫消失之后，重新回到該部分時，動畫效果并沒有重新啟動。

經過一些調查，我發現這是因為CSS動畫是通過添加一個類來實現的，當動畫結束時，該類會被移除。但是，如果用戶滾動了頁面，而新加載的部分中沒有該類，那么動畫不會被重新啟動。

.animation {
animation: example 1s;
}
@keyframes example {
0% { opacity: 0; }
100% { opacity: 1; }
}

解決這個問題的一個常見方法是使用JavaScript，例如，在滾動到該部分時，檢查是否已存在相應的類，并將其添加回來。這將確保動畫能夠重新啟動。

var element = document.querySelector(".animation");
function restartAnimation() {
element.classList.remove("animation");
void element.offsetWidth;
element.classList.add("animation");
}
window.addEventListener("scroll", function() {
if (isElementInViewport(element)) {
if (!element.classList.contains("animation")) {
restartAnimation();
}
}
});
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom<= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right<= (window.innerWidth || document.documentElement.clientWidth)
);
}

此代碼將檢查動畫所在部分是否在視口中，并在需要時重新啟動動畫。

在設計動畫時，應該始終考慮這些問題，確保在用戶滾動并重新加載部分時，動畫可以重新啟動。