在HTML / CSS / JSStreamLabs中以设置的延迟创建FadeIn / FadeOut动画

问题描述

Streamlabs具有一项功能，该功能使您可以在特定时间后（没有任何额外的代码）延迟文本的 fadeIn 动画。 但是，此功能几乎不可用。也没有控制 fadeOut 动画的选项。

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

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

我的目标是在4秒钟后显示带有 fadeIn 动画的文本（持续时间1秒），然后该文本应保持可见 3秒钟。最终，文字应在8秒后消失，并带有 fadeOut 动画（持续时间1秒）。

用这样的结构可以达到这种效果吗？

动画：fadeOut x y向前；

感谢所有帮助！谢谢！

编辑这是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%  */

解决方法

使用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>