仅使用 JavaScript 和 CSS 文本从左到右淡入淡出答案

【问题标题】：Text fade left to right using JavaScript and CSS only仅使用 JavaScript 和 CSS 文本从左到右淡入淡出
【发布时间】：2020-12-28 06:09:36
【问题描述】：

我正在尝试为我的流制作自己的警报，为此我需要从 streamlabs 获取文本（我认为 getElementById 会起作用），然后我必须将文本（或整个 HTML 标记）从左淡化到对。

我可以使用 CSS 使文本消失，但我不能让它像这张图片一样。

我该怎么办？

【问题讨论】：

检查这个答案。 stackoverflow.com/a/52510456/7921804 可以帮你解决问题

标签： javascript css css-transitions

【解决方案1】：

你可以用这个，如果需要更多帮助告诉我。

.image-border{
position: fixed;
width: 100vw;
height: 50vh;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: gray;
display: block;
}
.image-text-center{
display: flex;
justify-content: center;
align-items: center;
color: white;
width: 100%;
height: 100%;
font-size: 25px;
}
.image-text-center::after{
content:'';
position: absolute;
display: block;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 0;
height: 25px; /* size of font-size text parent */
background-color: gray;
transition: all 2500ms linear;
box-shadow: 8px 0 15px 10px gray;
}
.image-border:hover .image-text-center::after{
width: 100%;
box-shadow: 0 0 0 0 gray;
}

<div class="image-border" >

<div class="image-text-center">HELLO WORLD!!</div>

</div>

如果我的回答对您有帮助，请接受并投票；

【讨论】：

你也可以添加动画而不是使用悬停
实际上，这是一个聪明的技巧，但老实说，我需要一个透明的背景，而且它不透明......顺便说一句......你做得很好。