<!-- HTML -->
<div class="box"></div>
<p>/<em> CSS </em>/
.box {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
animation-play-state: paused; /<em> 初始暂停动画 </em>/
}</p><p>.animated {
animation-play-state: running; /<em> 滚动后启动动画 </em>/
}</p><p>@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}</p>

const box = document.querySelector('.box');
<p>function checkAnimation() {
const boxTop = box.getBoundingClientRect().top;
const windowHeight = window.innerHeight;</p><p>if (boxTop < windowHeight * 0.8) { // 元素进入视口 80% 高度时触发
box.classList.add('animated');
}
}</p><p>// 初始检查（防止页面刷新时已在视口内）
checkAnimation();
window.addEventListener('scroll', checkAnimation);</p>

const element = document.querySelector('.animate-on-scroll');
const start = 200;  // 开始动画的滚动位置
const end = 800;    // 动画结束的滚动位置
<p>function updateAnimationProgress() {
const scrollTop = window.pageYOffset;
let progress = 0;</p><p>if (scrollTop < start) {
progress = 0;
} else if (scrollTop > end) {
progress = 1;
} else {
progress = (scrollTop - start) / (end - start);
}</p><p>// 使用 transform 模拟关键帧动画
element.style.transform = <code>translateX(${progress * 100}px) rotate(${progress * 360}deg)</code>;
}</p><p>window.addEventListener('scroll', updateAnimationProgress);</p>

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animated');
      observer.unobserve(entry.target); // 只触发一次
    }
  });
});
<p>observer.observe(document.querySelector('.box'));</p>