如何使用react和javascript每秒更改部分文本的字体颜色？

我想使用react和javascript每秒更改部分文本的字体颜色

这是我的字符串“早上好”

我想要文本“晨”改变颜色

下面是我想改变的颜色

红、绿、蓝、黄、紫、粉、黑

下面是我试过的

const Parent = () => {
    <div>
        <span>good</span>
        <span class="change">morning</span>
    </div>
}


.change {
    animation: change 1s step-end both;
}

@key-frames change {
    from {color: red}
    to {color: green}
}

const Parent=（）=>{
好的
早晨
}
.改变{
动画：更改1s步结束和结束；
}
@关键帧更改{
来自{color:red}
至{颜色：绿色}
}

但上面只会将文本从红色更改为绿色。我如何使它保持一个循环，就像应该改变文本的颜色，从红色、绿色、蓝色、黄色、紫色、粉色、黑色，再到红色、绿色等等

有人能帮我修一下吗。谢谢。

修复语法（

@关键帧

->

@关键帧

），使动画无限，并添加更多颜色步骤：

.change{
动画：改变1s步结束无限；
}
@关键帧改变{
0% {
颜色：红色
}
25% {
颜色：绿色
}
50% {
颜色：橙色
}
75% {
颜色：蓝色
}
}

好的
早晨

您看到这个答案了吗？这回答了你的问题吗？感谢添加黄色、粉色、紫色和黑色，我应该做100%{color:yellow}125%{color:pink}150%{color:purple}175%{color:black}这样的事情吗？不，百分比必须保持在0和100之间。如果共有8种颜色，则需要0%12.5%、25.0%、37.5%、50.0%、62.5%、75.0%、87.5%。