如何使我的文本从左到右突出显示？

Question

我一直在寻找一种方法来完成这项工作，但目前我无法找到我想要的东西。

我有这个要突出显示的文本，我想从左到右将其动画化为 go。 到目前为止，我已经设法让高光在设定的时间后出现，但没有从左到右的效果。

这是它现在的样子以供参考：

这是我用来实现这一点的 css：

@keyframes highlight {
    0% {
        background: none;
    }

    100% {
        background: linear-gradient(to top, $light-purple 50%, transparent 50%);
    }
}

h2 {
    display: inline;
    animation-name: highlight;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

我知道这是一个非常新手的问题，但老实说，考虑到我已经拥有的东西，我真的找不到正确的方法......如果有人可以提供帮助，我将不胜感激！

提前致谢

Answer 1

我找到了一个受这篇文章启发的解决方案：

 @keyframes highlight { from { background-position: 0; } to { background-position: -100%; } } h2 { animation-name: highlight; animation-duration: 0.75s; animation-fill-mode: forwards; background-size: 200%; background-image: linear-gradient(to right, transparent 50%, purple 50%); }

 <h2>Here is an example text that will have the highlight</h2>