CSS动画延迟无法使用2个模拟动画

Question

我试图在一些文本上运行2个CSS动画。

第一个动画使文本从黑色渐变为绿色。。。但我希望文本在一定时间后变成深绿色所以基本上有一个"活动"状态，然后是一个"非活动"状态

我已经为第一部动画做好了时间安排和动画制作。。。但出于某种原因，第二部动画并没有推迟它被要求。。。第一个动画完成后，第二个动画立即运行

<div class="topicLiRung" style='animation-name: active; animation-duration: 3s; animation-delay: ${weekData.delay}s; animation-fill-mode:forwards; animation-name: inactive;  animation-duration: 3s; animation-delay: ${weekData.inactive}s; animation-fill-mode:forwards;  '>${weekData.topic}</div>

这是正在运行的代码，所以它基本上是一个div，它有2个amimation，该样式具有来自服务器数据的动态计时。

为什么第二部动画没有等到被问到的时候？

Answer 1

我在A Haworth的评论的帮助下弄明白了。。。

多个CSS动画应该这样处理：

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

不是我写的方式。

希望这能帮助