时间戳

首页 > 解决方案 > 在 HTML/CSS/JS (StreamLabs) 中创建具有设定延迟的 FadeIn/FadeOut 动画

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

问题描述

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

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

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

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

这种结构能达到这种效果吗？

动画：fadeOut xy 向前；

感谢所有的帮助！谢谢！

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

标签： javascripthtmlcssfadeinfadeout

解决方案

这确实可以通过 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>

推荐阅读