1

Safari で似たようなものを見つけた人はいますか?

同じ CSS セレクターに 3 つのアニメーション名を定義し、各アニメーションの遅延が以前のアニメーションの継続時間よりも長くなるようにしました。

.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 で一時停止できるアニメーションは 1 つだけです。Safari は、あらゆる種類の複数のアニメーションで何かを正しく一時停止することができません (たとえば、各単一のアニメーションを含む積み重ねられた要素も一時停止できません。何をしてもまったく同じ問題です)。

私たちの解決策は、コーディング対象のブラウザーのリストから safari を削除することでした。これは冗談ではありません。

于 2016-04-06T09:28:41.707 に答える