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

Question

我回到这里寻找你的智慧。我一直在一个网站上工作，我做了一些CSS制作了一些文本后面的宽度转换动画效果，并且使用悬停效果还是不错，我想只对自动动画具有相同的效果（但有些延迟会起作用）滚动），但可悲的是我不知道怎么做。

有什么想法吗？

非常感谢！

此处是网站： http://231e47.com/accueil-cf/

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

这是我的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>

非常感谢！