1. 4cres

    No comment

    4cres
Changes in body
Source | HTML | Preview
@@ -1,28 +1,28 @@
下記を参考に `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を読み込むようにすると改善されました。
+原因は不明ですが、アニメーション関連(`@keyframes` と `animation`プロパティ)の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 環境でアニメーションが動かない、または不安定の方は試してみてください。
これで5時間消えました...;;