在 HTML/CSS/JS 中创建具有设置延迟的 FadeIn/FadeOut 动画 (StreamLabs)

Question

Streamlabs 具有一项功能，可让您在特定时间后延迟文本的 fadeIn 动画（无需任何额外代码）。虽然这个功能几乎不可用。也没有控制 fadeOut 动画的选项。

如果您将 fadeIn delay 定义为 ~4s：它（在 4s 之后）直接从 0% 不透明度跳到 50%不透明度，一秒钟后它跳到 100% 不透明度。没有流畅的动画。但是，如果您将“文本延迟”设置为 0，则不会发生这种情况。如果将它保持为 0，一切看起来都很好。

所以我想知道如何使用 HTML、CSS 或 JS 实现我自己的 fadeInFadeOut 动画版本。

我的目标是让文本在 4 秒后出现 fadeIn 动画（持续时间 1 秒），然后它应该保持 visible 3秒。最终文本应该在 8 秒后消失，并带有 fadeOut 动画（持续时间 1 秒）。

这样的结构能达到这个效果吗？

animation: fadeOut x y forwards;

感谢所有帮助！谢谢！

编辑这是来自 Streamlabs 的带有 CSS FadeIn/Out 动画的更新代码。

```HTML
<div id="alert-image-wrap"
 <div id="alert-image">{img}</div>
</div>

<div id="alert-text-wrap">
<div id="alert-text">
<div id="alert-message">{messageTemplate}</div>
<div id="alert-user-message">{userMessage}</div>
</div>
</div>
```


``` CSS (most important parts)
#alert-text {
z-index: 6;
 position: relative;
top: -920px;
}
#alert-text-wrap {
z-index: 6;
position: relative;
opacity:1;
animation: fadein-fadeout 9s forwards; 
}
*//credits @Cedric Cholley*
@keyframes fadein-fadeout {
...
100% {opacity: 0} /* (8 + 1) 9s / 9s = 100%  */

Answer 1

确实可以通过 CSS 动画实现。您只需要进行一些计算（请参阅我对 CSS 代码的评论。

.fadein-fadeout {
 animation: fadein-fadeout 9s forwards; 
}

@keyframes fadein-fadeout {
  0% {opacity: 0}
  44.4% {opacity: 0} /* 4s / 9s ~ 44.4…% */
  55.6% {opacity: 1} /* (4 + 1) 5s / 9s ~ 55.6…% */
  88.9% {opacity: 1} /* (5 + 3) 8s / 9s ~ 88.9…% */
  100% {opacity: 0} /* (8 + 1) 9s / 9s = 100%  */

<h1 class="fadein-fadeout">A random text</h1>

在 HTML/CSS/JS 中创建具有设置延迟的 FadeIn/FadeOut 动画 (StreamLabs)

Creating a FadeIn/FadeOut Animation with a set delay in HTML/CSS/JS (StreamLabs)

html

javascript

css

fadeout

fadein