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

Question

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

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

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

这是我用来实现这一点的 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

我找到了一个受this article启发的解决方案：

@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, white 50%, transparent 50%), 
                      linear-gradient(transparent 50%, purple 50%);
}

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