如何为我的文本设置动画以从左到右突出显示？

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>

如何为我的文本设置动画以从左到右突出显示？

How can I animate my text to highlight from left to right?

css

css-animations