Css 使用循环从左到右为文本加下划线

我一直在尝试在这个网站上做同样的文本下划线效果

（单击汉堡菜单时的链接）

到目前为止，我能够在悬停时画下划线，但我如何使它重复

.HvrUnderline{
position:relative;
text-decoration:none;
display:inline-block;
}
.HvrUnderline:after {
    display: block;
    content: '';
    border-bottom: solid 3px #F16A70;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    transform-origin: 100% 50%
}
.HvrUnderline:hover:after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

---

非常感谢任何帮助

您不能通过

转换

…您需要一个

关键帧

动画

。重复，您的意思是希望下划线动画反复出现，直到您停止悬停？