没有悬停的宽度变换动画？CSS问题

我回来找你的智慧。我一直在一个网站上工作，我做了一些css，在一些文本后面制作了一个宽度变换动画效果，它可以很好地使用悬停，但是我想只有在自动动画中才会有同样的效果（有一些延迟，可以与卷轴一起工作），但遗憾的是我不知道怎么做

有什么想法吗

非常感谢

网址如下：

悬停效果出现在文本“我们在这里！”

这里是我的CSS：

<style> 
.highlight { display: inline-block; 
color: #343434;
text-decoration: none;
position: relative;
z-index: 0;
}
.highlight::after {
position: absolute;
z-index: -1;
bottom: 10px;
left: 0%;
transform: translateX(0%);
content: '';
width: 0px;
height: 43%;
background-image: linear-gradient(120deg, #48d1de 0%, #84fab0 180%);
transition: all 250ms;
}
.highlight:hover {
color: #343434;
}
.highlight:hover::after {
height: 43%;
width: 108%;
}
</style>

.突出显示{显示：内联块；
颜色：#3434；
文字装饰：无；
位置：相对位置；
z指数：0；
}
.highlight：：之后{
位置：绝对位置；
z指数：-1；
底部：10px；
左：0%；
转化：translateX（0%）；
内容：''；
宽度：0px；
身高：43%；
背景图像：线性梯度（120度，#48d1de0%，#84fab0 180%）；
过渡：所有250ms；
}
.亮点：悬停{
颜色：#3434；
}
.突出显示：悬停：：之后{
身高：43%；
宽度：108%；
}

---

非常感谢

希望您至少尝试自己编写此代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码并解释您尝试了什么。当然，谢谢您的回答。我试过使用悬停效果，我也试着通过谷歌查找更多信息，但我没有找到如何将我的宽度转换链接到滚动自动动画中，就像我之前所说的那样。这就是我来这里的原因，不是要一个代码，而是想至少了解一下我可以深入研究的主题类型，这样我就可以理解我想做的这种宽度变换的滚动动画。谢谢，我们不提供“想法”。Scrooling需要Javascript，所以你必须研究这个问题。这是非常粗鲁的。如果你认为你没有提供“想法”，那么就忽略我的信息。我在这里寻求帮助，诚实地告诉你我已经取得了什么成就，并诚实地告诉你，很遗憾，我不知道如何在滚动动画中变换宽度，但我想尝试和学习。我不是在要求代码，我只是在寻求帮助和“想法”，我可以尝试或查看更多信息。只是给我更多的视角来尝试javascript而不是css，这是一个很好的帮助。告诉你你在错误的地方并不粗鲁。你不会指望餐馆会告诉你如何修理汽车。这就是我们建议进行更多研究的原因。