如何为CSS keyframes文字切换效果添加平滑过渡动画？

你当前的实现方式无法实现平滑过渡，因为CSS的content属性属于离散属性，不支持过渡动画。要达到类似示例的平滑切换效果，可以通过定位叠加文字元素，结合opacity和transform属性来实现淡入淡出+位移的动画。

完整实现代码 #

HTML结构

<span class="example-text">This text will
  <span class='rotate-text'>
    <span class="rotate-item">MIND</span>
    <span class="rotate-item">BODY</span>
    <span class="rotate-item">HEART</span>
    <span class="rotate-item">SOUL</span>
    <span class="rotate-item">TEARS</span>
  </span>
</span>

CSS样式

.example-text {
  font-size: 1.2rem;
}

.rotate-text {
  position: relative;
  display: inline-block;
  height: 1.2em; /* 固定高度避免容器跳动 */
  vertical-align: bottom;
}

.rotate-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: rotateAnim 5s infinite ease-in-out;
}

/* 为每个文字设置动画延迟，实现依次切换 */
.rotate-item:nth-child(2) { animation-delay: 1s; }
.rotate-item:nth-child(3) { animation-delay: 2s; }
.rotate-item:nth-child(4) { animation-delay: 3s; }
.rotate-item:nth-child(5) { animation-delay: 4s; }

@keyframes rotateAnim {
  0%, 10% {
    opacity: 1;
    transform: translateY(0);
  }
  15%, 90% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

关键实现细节 #

• .rotate-text设置相对定位和固定高度，确保文字切换时容器尺寸不变，避免整体布局跳动
• 每个.rotate-item绝对定位叠加在一起，初始状态透明且向下偏移
• 动画通过opacity控制淡入淡出，transform: translateY()实现上下位移，模拟平滑过渡效果
• 利用animation-delay让每个文字依次触发动画，形成循环轮换
• 调整关键帧的百分比（比如0%-10%保持显示，15%后隐藏），可以灵活控制每个文字的停留时长和过渡速度

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