こんにちは！
絶賛風邪っぴき中のワタナベです！
皆様もお気を付けください(>_<)
今回はCSSアニメーションでハマった事について備忘録として書いていきたいと思います(‘ω’)ノ
スマホでCSSアニメーションがうまく動かない
ある日、私は下記のような感じでループする背景を作成しました。
.style{
width: 100%;
height: 500px;
background-image: url(../img/xxxxx.jpg) repeat-x ;
-webkit-animation: animation 32s linear infinite;
animation: animation 32s linear infinite;
}
@-webkit-keyframes animation {
from { background-position: 0 0; }
to { background-position: -1480px 0; }
}
@keyframes animation {
from { background-position: 0 0; }
to { background-position: -1480px 0; }
}
PC上では元気に動いていました。
しかし、スマホで見ると、スクロールしているときは動いていたのですが、スクロールを辞めるとピタッと動かなくなってしまいました。
………………………？
ためしに上記と同じアニメーションを使用している別のサイトをいくつかスマホで見てみましたが、そちらはちゃんと動いていました。
何故………？
解決方法
ググりにググって、原因は分からずじまいでしたが、解決方法を発見。
まず、アニメーション関連のCSS（@keyframesとanimation）を別ファイルで作成します。
そして、その別ファイルにしたCSSを、下記jQueryで読み込みます。
<script>
$(function(){
var style = ‘<link rel=”stylesheet” href=”animation.css”>’;
$(‘head link:last’).after(style);
});
</script>
この方法で読み込んだ結果、無事にスマホでも動きました！！！
皆様もCSSアニメーションがスマホで動かなかった時はこちらの方法を試してみてください(‘ω’)ノ
救世主様
それではまた次回！
ご閲覧ありがとうございましたm(__)m
