基于HTML/CSS/JS实现StreamLabs带延迟的淡入淡出动画方案

当然可以实现你想要的精准动画效果！StreamLabs自带的文本延迟动画确实不够流畅，我们只需要修改CSS关键帧就能完全匹配你的需求：4秒延迟后1秒淡入，保持可见3秒，8秒后1秒淡出。

解决方案：替换核心CSS代码 #

你的HTML结构完全不需要改动，只需要把原来的核心CSS部分替换成下面的代码：

#alert-text {
  z-index: 6;
  position: relative;
  top: -920px;
}
#alert-text-wrap {
  z-index: 6;
  position: relative;
  opacity: 0; /* 初始状态设为透明，避免动画前闪现 */
  animation: fadein-fadeout 9s forwards; /* forwards确保动画结束后保持最后状态 */
}

/* 自定义关键帧动画，完全匹配你的时间线 */
@keyframes fadein-fadeout {
  /* 0-4秒：完全透明，等待延迟（4/9≈44.44%） */
  0%, 44.44% {
    opacity: 0;
  }
  /* 4-5秒：1秒平滑淡入（5/9≈55.55%） */
  55.55% {
    opacity: 1;
  }
  /* 5-8秒：保持完全可见3秒（8/9≈88.88%） */
  88.88% {
    opacity: 1;
  }
  /* 8-9秒：1秒平滑淡出 */
  100% {
    opacity: 0;
  }
}

关键细节解释 #

1. 时间百分比计算：总动画时长是9秒（4秒延迟+1秒淡入+3秒保持+1秒淡出），每个时间点除以9得到对应的关键帧百分比，确保动画精准对齐你的需求。
2. 初始状态设置：把#alert-text-wrap的初始opacity设为0，避免动画开始前文本突然闪现。
3. forwards属性：这个属性会让动画结束后停在最后一帧（完全透明），不会重置到初始状态，符合弹窗消失后的预期。
4. 平滑过渡：关键帧之间的opacity变化会自动触发CSS的平滑过渡，完全解决了StreamLabs自带动画跳变的问题。

直接替换后，你的文本弹窗就会按照预期的时间线流畅运行了！

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