实现可见区域CSS动画：滚动触发的动态变换教程

<section class="animated-section">
    <div class="animated-item left-item">
        <h2>左侧内容</h2>
        <p>这是从左侧滑入的示例内容。</p>
    </div>
    <div class="animated-item right-item">
        <h2>右侧内容</h2>
        <p>这是从右侧滑入的示例内容。</p>
    </div>
    <div class="animated-item bottom-item">
        <h2>底部内容</h2>
        <p>这是从底部滑入的示例内容。</p>
    </div>
</section>
<!-- 更多内容，确保页面可滚动 -->
<div style="height: 100vh; background-color: #eee;"></div>
<div style="height: 100vh; background-color: #ddd;"></div>

.animated-item {
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    /* 默认状态，防止内容跳动 */
    will-change: transform, opacity; /* 优化性能 */
}

.left-item {
    transform: translateX(-100%); /* 从左侧移出 */
}

.right-item {
    transform: translateX(100%); /* 从右侧移出 */
}

.bottom-item {
    transform: translateY(50px); /* 从底部稍微移出 */
}

/* 动画激活时的最终状态 */
.animated-item.is-visible {
    opacity: 1;
    transform: translate(0, 0); /* 归位 */
}

document.addEventListener('DOMContentLoaded', () => {
    const animatedItems = document.querySelectorAll('.animated-item');

    function checkVisibility() {
        animatedItems.forEach(item => {
            const itemTop = item.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;

            // 当元素顶部进入视口下半部分时，视为可见
            // 也可以根据具体需求调整触发点，例如 itemTop < windowHeight - item.offsetHeight / 2
            if (itemTop < windowHeight * 0.75) { // 元素顶部进入视口75%的位置
                item.classList.add('is-visible');
            } else {
                // 如果需要元素滚出视口后恢复初始状态，则取消注释
                // item.classList.remove('is-visible');
            }
        });
    }

    // 页面加载时立即检查一次
    checkVisibility();

    // 监听滚动事件
    window.addEventListener('scroll', checkVisibility);

    // 为了优化性能，可以对滚动事件进行节流或防抖
    // 例如使用 lodash.throttle 或自定义实现
    // window.addEventListener('scroll', throttle(checkVisibility, 200));
});

document.addEventListener('DOMContentLoaded', () => {
    const animatedItems = document.querySelectorAll('.animated-item');

    const observerOptions = {
        root: null, // 根元素是视口
        rootMargin: '0px', // 视口边距
        threshold: 0.2 // 目标元素20%可见时触发回调
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 元素进入视口
                entry.target.classList.add('is-visible');
                // 如果动画只需触发一次，可以停止观察
                // observer.unobserve(entry.target);
            } else {
                // 元素离开视口 (如果需要动画反向或重置)
                // entry.target.classList.remove('is-visible');
            }
        });
    }, observerOptions);

    animatedItems.forEach(item => {
        observer.observe(item);
    });
});