如何解决CSS多方向淡入动画的初始闪烁问题？

问题核心是初始状态下文字未正确隐藏，导致动画执行前出现闪烁。以下是修改方案：

关键修改点 #

• 移除<h1>上的全局淡入动画，改为单独控制每个span的初始隐藏状态
• 给每个span设置初始不可见状态（opacity:0 + 对应方向的偏移），确保动画开始前完全不可见
• 给span的动画添加forwards属性，让动画结束后保持最终状态

修改后的完整代码 #

HTML #

<div class="hero">
  <h1 class="">
    <span class="one">One</span>
    <span class="two">Two</span>
    <span class="three">Three</span>
  </h1>
</div>

CSS #

.hero {
  width: 100%;
  height: auto;
  background-color: black;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.hero h1 {
  font-family: "Montserrat", sans-serif;
  color: white;
  display: flex;
  font-size: 6rem;
}
/* 给每个span设置初始隐藏状态 */
.hero h1 span.one {
  display: block;
  opacity: 0;
  transform: translateX(-100%);
}
.hero h1 span.two {
  display: block;
  opacity: 0;
  transform: translateY(100%);
}
.hero h1 span.three {
  display: block;
  opacity: 0;
  transform: translateX(100%);
}
/* 添加active类后执行动画，使用forwards保持最终状态 */
.hero h1.active span.one {
  animation: bounceOne 1.5s ease forwards;
}
.hero h1.active span.two {
  animation: bounceTwo 1.5s ease forwards;
}
.hero h1.active span.three {
  animation: bounceThree 1.5s ease forwards;
}
@keyframes bounceOne {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  30% {
    transform: translateX(10%);
    opacity: 1;
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes bounceTwo {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  30% {
    transform: translateY(10%);
    opacity: 1;
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes bounceThree {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  30% {
    transform: translateX(-10%);
    opacity: 1;
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

JavaScript #

setTimeout(() => {
  let hOne = document.getElementsByTagName('h1');
  hOne[0].classList.add('active');
}, 1000);

原理说明 #

1. 初始状态下每个span都设置了opacity:0和对应方向的偏移，完全隐藏在可视区域外，不会出现闪烁
2. 当添加active类后，才触发每个span的动画，从隐藏状态过渡到正常显示
3. forwards属性确保动画结束后，span保持最终的可见状态（opacity:1 + 无偏移）

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