SafariのCSSアニメーション遅延バグ

Question

私は最近、CSSアニメーションに関してDOMが操作されたときに要素の位置を更新できないという点で、Safariで奇妙な動作を経験しました。

DOMでanimation-delayが更新されると、ブラウザーは期待通りに要素のアニメーションの位置を更新します（Chromeのhttp://recordit.co/cCim1IwyMc）。

Safari（http://recordit.co/3DRmEdo0FC）では、animation-delayがDOMで更新されると、ブラウザは要素のアニメーション位置を更新できません。

これは私にリフロー/再発行の問題のようです。 Safariのインスペクタでアニメーション要素の上にマウスを移動すると、青色のオーバーレイもアニメーションに追いつかなくなることに気付きました。ここで

コードです：私は最近、サファリやCSS3アニメーションについても、同様の問題に出くわしhttp://codepen.io/jabes/pen/pNgRrg

Answer 1

、サファリが速記パターンを使用してアニメーションを定義するときに、単一のアニメーションプロパティの上書きの問題を持っているようです。私の場合、それはサファリのために変更することができなかったアニメーション再生状態だったので、単にアニメーション再生状態を設定するのではなく、アニメーション文字列全体を一度に適用する必要がありました。

試してみてください。

.animator { 
    width: calc(100% - 100px); 
    animation: slide 50s linear 1s forwards; /* animation-delay 1s */ 
} 

遅延がタイミング機能の後に右行きます。