safari, iOS で CSS アニメーションが動かない（不安定）

下記を参考に keyframes と animation を使って transform: translateX で横に移動するアニメーションを実装しました。

• 写真が画面の端から端へ流れる無限ループするアニメーション

macOS High Sierra 10.13.6 の Safari 12.0 の環境で数回リロードして動作確認すると、数回1回アニメーションが動きませんでした。

iPhone8 iOS 12.0.1 でも同様にアニメーションが動きません。

iOSの場合は Safari だけではなく、Chrome でも同様に動作が不安定でした。（描画する前にCSSの値を計算できていない？）

原因は不明ですが、アニメーション関連（@keyframes と animationプロパティ）のCSSだけを別ファイルにして、jQuery でHTMLの読み込みが完了してからCSSを読み込むようにすると改善されました。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
    var style = '<link rel="stylesheet" href="style.css">';
    $('head link:last').after(style);
});
</script>

参考：HTMLの読み込みが完了してから実行

同じように safari, iOS 環境でアニメーションが動かない、または不安定の方は試してみてください。

これで5時間消えました...；；