同时执行两个CSS动画时，animation-delay属性不生效问题

问题根源 #

你在同一个内联样式里重复声明了animation-name、animation-duration等动画属性，CSS的核心规则是后定义的同名属性会直接覆盖前面的。也就是说，你写的第一个active动画的所有配置（包括延迟时间）都被后面的inactive动画配置覆盖了，实际页面中只有inactive动画在运行。你看到的“第一个动画正常执行”，大概率是浏览器渲染时的短暂残留，或者两个动画的关键帧初始状态有重叠，导致视觉上产生误解。

正确写法 #

要给同一个元素添加多个独立的CSS动画，必须在同一个动画属性中用逗号分隔每个动画的完整配置，避免属性覆盖。以下两种写法都可行：

写法1：使用animation简写属性

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

写法2：拆分单个动画属性（用逗号分隔多值）

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

额外说明 #

animation-fill-mode: forwards会让动画结束后停留在最后一帧的状态，只要你设置的${weekData.inactive}s大于${weekData.delay}s + 3s（第一个动画的延迟+时长），就能实现“先从黑色渐变到绿色，等待指定时长后再渐变到深绿色”的效果。

内容的提问来源于stack exchange，提问作者Wan33