如何实现h1元素完全进入视口时才触发预设的CSS动画？

你当前动画提前执行的核心原因是直接在HTML结构中给span元素默认添加了showtext类，页面加载完成后动画就会立即触发，和滚动位置没有绑定，按照以下步骤修改即可实现需求：

第一步：调整HTML结构 #

移除span标签上默认挂载的showtext类，修改后的代码如下：

<div class="page2">
  <h1 class="text"><span class="hidetext">Animated Text</span></h1>
</div>

第二步：补充基础样式 #

给hidetext类添加初始状态，保证元素未进入视口时，文字默认隐藏在容器下方：

.hidetext {
  display: block;
  transform: translateY(100%);
}

第三步：添加Intersection Observer监听逻辑 #

在页面中插入如下JS代码，建议放在</body>闭合标签之前：

// 选中需要监听的目标h1元素
const animatedH1 = document.querySelector('.page2 h1');
// 实例化Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(item => {
    // 元素完全进入视口时触发逻辑
    if (item.isIntersecting) {
      // 给span添加类触发动画
      item.target.querySelector('.hidetext').classList.add('showtext');
      // 若只需触发一次动画，触发后取消监听即可
      observer.unobserve(item.target);
    }
  })
}, {
  threshold: 1 // 取值0-1，1代表元素100%进入视口才触发回调
})
// 启动监听
observer.observe(animatedH1);

如果需要调整触发时机，只需要修改threshold的参数即可，比如设置为0.8就是元素露出80%的时候触发动画。

内容的提问来源于stack exchange，提问作者Pranay Majee