1. 4cres

    Posted

    4cres
Changes in title
+safari, iOS で CSS アニメーションが動かない(不安定)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,26 @@
+下記を参考に `keyframes` と `animation` を使って `transform: translateX` で横に移動するアニメーションを実装しました。
+
+- [写真が画面の端から端へ流れる無限ループするアニメーション](https://chocolat5.com/tips/loop-image-animation/)
+
+macOS High Sierra 10.13.6 の Safari 12.0 の環境で数回リロードして動作確認すると、数回1回アニメーションが動きませんでした。
+
+iPhone8 iOS 12.0.1 でも同様にアニメーションが動きません。
+
+iOSの場合は Safari だけではなく、Chrome でも同様に動作が不安定でした。(描画する前にCSSの値を計算できていない?)
+
+原因は不明ですが、アニメーショのCSSだけを別ファイルにして、jQuery でHTMLの読み込みが完了してからCSSを読み込むようにすると改善されました。
+
+```html
+
+<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の読み込みが完了してから実行](https://qiita.com/cervomansan/items/0873026853686503fc3a)
+
+同じように safari, iOS 環境でアニメーションが動かない、または不安定の方は試してみてください。