1. 4cres

    No comment

    4cres
Changes in body
Source | HTML | Preview

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

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

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

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

原因は不明ですが、アニメーショのCSSだけを別ファイルにして、jQuery原因は不明ですが、アニメーション関連( でHTMLの読み込みが完了してからCSSを読み込むようにすると改善されました。@keyframesanimationプロパティ)の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時間消えました...;;