1

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

4

1 回答 1

1

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

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

于 2016-04-06T09:28:41.707 回答