如何实现pop in与pop out动画？参考指定站点加载页动画效果

你现有代码未生效的核心原因是缺少对应动画的CSS定义，且没有完整的多文字轮播切换逻辑，按以下修改即可实现效果：

1. 新增CSS动画规则 #

.word {
  position: absolute;
  opacity: 0;
  transform: scale(0.8);
  margin: 0;
}
.current {
  animation: pop-in 0.6s ease forwards;
}
.out {
  animation: pop-out 0.6s ease forwards;
}
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pop-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
.words {
  position: relative;
  /* 可自行调整容器高度适配文字大小 */
  height: 80px;
  display: flex;
  align-items: center;
}

2. 替换为完整JS逻辑 #

const words = document.querySelectorAll('.word');
let currentIndex = 0;
// 单步切换逻辑
function switchWord() {
  const currentWord = words[currentIndex];
  // 给当前文字加退场动画
  currentWord.classList.add('out');
  currentWord.addEventListener('animationend', () => {
    currentWord.classList.remove('current', 'out');
    // 计算下一个文字索引，到末尾自动切回第一个
    currentIndex = (currentIndex + 1) % words.length;
    const nextWord = words[currentIndex];
    nextWord.classList.add('current');
    // 2秒后触发下一次切换，可自行调整停留时长
    setTimeout(switchWord, 2000);
  }, { once: true }); // 单次监听避免重复绑定
}
// 页面加载后启动第一次切换
setTimeout(switchWord, 2000);

3. HTML结构保持不变即可 #

<div class="words">
  <h1 class="projects word current">PROJECTS</h1>
  <h1 class="portfolio word">PORTFOLIO</h1>
  <h1 class="stuff word">STUFF?</h1>
  <h1 class="sections word">SECTIONS</h1>
</div>

你可以根据需求调整动画时长、文字停留时长、动画曲线参数，就能匹配你想要的效果。

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