多个CSS动画：暂停不会在Safari上显示当前帧

有人在狩猎中偶然发现过类似的东西吗

我为同一个CSS选择器定义了三个动画名称，确保每个动画的延迟都高于之前动画的持续时间

.bg_anim {
    animation-delay: 0s, 5s, 10s;
    animation-duration: 3s, 3s, 3s;
    animation-name: blueToRed, redToYellow, yellowToBlack;
    animation-fill-mode: forwards, forwards, forwards;

    -webkit-animation-delay: 0s, 5s, 10s;
    -webkit-animation-duration: 3s, 3s, 3s;
    -webkit-animation-name: blueToRed, redToYellow, yellowToBlack;
    -webkit-animation-fill-mode: forwards, forwards, forwards;
}

@keyframes blueToRed {
    0%   {background-color: blue}
    100% {background-color: red}
}

@-webkit-keyframes blueToRed {
    0%   {background-color: blue}
    100% {background-color: red}
}

@keyframes redToYellow {
    0%   {background-color: red}
    100% {background-color: yellow}
}

@-webkit-keyframes redToYellow {
    0%   {background-color: red}
    100% {background-color: yellow}
}

@keyframes yellowToBlack {
    0%   {background-color: yellow}
    100% {background-color: black}
}

@-webkit-keyframes yellowToBlack {
    0%   {background-color: yellow}
    100% {background-color: black}
}

动画系列开始时，暂停始终显示最后一个动画的最后一帧，而不是当前动画的当前帧

---

有关该示例的完整版本，请参见

是的，我们在一家专业公司工作，我们注意到了同样的问题。我们对此进行了彻底的测试，发现没有解决方法，这是一个严重的错误。在safari中只能暂停一个动画。Safari无法在任何类型的多个动画中正确暂停任何内容（例如，每个动画中的堆叠元素也不能暂停，同样的问题，无论您做什么）

我们的解决方案是从我们编写代码的浏览器列表中删除safari。这不是开玩笑