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

Question

私は遅延のあるCSSアニメーションを持っていますが、その間に私はそれを一時停止します。 FirefoxとChromeで正常に動作し、「Hello」は動かない。 しかしSafariでは、アニメーションは最後のフレームにジャンプします。 なぜ、どのように修正してください？

function test() { 
 
    var timeout = 1000; 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState = 'paused'; 
 
    }, timeout); 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    animation: test 2s linear 2s; 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

私は2秒の遅延を削除した場合、4Sに期間を設定し、変換してキーフレームを追加します。どれも、私はこの単純な例を動作させることはできません。しかし、私の実際のケースでは、遅延と同期した複数のアニメーションがあります。

Answer 1

これは問題の答えではありません。ただし、アニメーションの遅延を削除すると、アニメーションの一時停止と再開が必要なように機能します。アニメーションの遅れが問題の原因となっているようです。おそらく、遅延を処理するためにCSSに頼るのではなく、プログラムでjavascriptでアニメーションの遅延を制御します。タイムアウトがアニメーション遅延よりも小さい値に設定されているのみバグが

アニメーション

function test() { 
 
    var timeout = 1000; 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState ='paused'; 
 
    document.getElementById('animation').style.webkitAnimationPlayState ='paused'; 
 
    }, timeout); 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState='running'; 
 
    document.getElementById('animation').style.webkitAnimationPlayState ='running'; 
 
    }, timeout * 2); 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    -webkit-animation: test 2s linear; 
 
     animation: test 2s linear; 
 
} 
 

 
@-webkit-keyframes test { 
 
    to { 
 
    -webkit-transform: translateY(100px); 
 
     transform: translateY(100px); 
 
    } 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    -webkit-transform: translateY(100px); 
 
     transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

Answer 2

サファリの動作を一時停止し、実行下記参照です。だから、回避策は、以下に示すように、animation-play-state経由pausedに初期状態を設定し、JSを経由して、それを制御することです：

function test() { 
 
    let el = document.getElementById("animation"); 
 
    let timeout = 1000; 
 
    
 
    // Get the delay. No luck with el.style.animationDelay 
 
    let delay = 
 
    window 
 
     .getComputedStyle(el) 
 
     .getPropertyValue("animation-delay") 
 
     .slice(0, -1) * 1000; 
 

 
    // Only resume and later pause when timeout is greater than animation delay 
 
    if (timeout > delay) { 
 
    el.style.animationPlayState = "running"; 
 
    setTimeout(function() { 
 
     el.style.animationPlayState = "paused"; 
 
    }, timeout); 
 
    } 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    animation: test 2s linear 3s; 
 
    animation-play-state: paused; /* Pause it right after you set it */ 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

は、それが働いて見に異なるタイムアウト値を試してみてください。なぜこれが起こっているのかは分かりません。私のバグのように見えます。 OS X El Capitan 10.11.6/Safari 11.0（11604.1.38.1.7）でテスト済みです。

Codepen demo