Question

有没有人在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}
}

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

有关该示例的完整版本，请参阅https://jsfiddle.net/mrgiba/qtco0dcr/

Answer 1

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

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

多个CSS动画：暂停不显示Safari

1 个答案: