こんにちは。きんくまです。
CSS3アニメーションのこんなコードを書いて、あるエレメントに適用しました。
@-webkit-keyframes flapping {
0% {
-webkit-transform:scale(0,0);
opacity:1;
}
100% {
-webkit-transform:scale(1,1);
opacity:0;
}
}
でも、iPadでスクロールさせたときに、CSS3 アニメーションが止まってしまい、困ってしまいました。
正確に言うと、0%のキーフレームの位置からそれ以上進まなくなってしまうのです。
ググったところ、こんな感じのページを発見。
>> GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法
CPUからGPUのレンダリングの切り替えのタイミングでsafariがちらつくとのこと。
最初からGPUレンダリングを使えば、そんなことなくなるよ。
これをするために、こんなCSSプロパティを使えばいいみたい。
-webkit-transform-style: preserve-3d;
そしたら、うまいこと解決してくれました。
助かりました。どうもです。
たぶん予想するに、スクロールするときにその切り替えのタイミングが起こっていたのかもしれませんね。
■ 自作iPhoneアプリ 好評発売中！
・フォルメモ - シンプルなフォルダつきメモ帳
・ジッピー電卓 - 消費税や割引もサクサク計算！
■ LINEスタンプ作りました！
毎日使える。とぼけたウサギ
