css - 没有悬停的宽度变换动画？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>

多谢 ！

标签： cssscrollwidthtransform