Edited at

iOSのsafariでCSSアニメーションがちらつく

More than 3 years have passed since last update.

CSS3アニメーションを使う時に、PCのブラウザで確認して特に問題なかったのですが、

iPhone実機のsafariで確認したところ、最初に一瞬表示がちらつく現象がありました。

事象としては、下記ようなCSSアニメーションを設定した要素を、

$('.hoge').show();

で表示した際に、一瞬「HOGE」が表示されてからCSSアニメーションが始まるような感じでした。

想定としては、最初は何も表示されず、「HOGE」が拡大しながら表示されるはずでした。


css

.hoge{

display : none;
-webkit-animation : anim 0.3s linear 1 normal;
}
@-webkit-keyframes anim{
0% {-webkit-transform: scale(0); opacity:0}
85% {-webkit-transform: scale(1.2); opacity:1}
100% {-webkit-transform: scale(1); opacity:1}
}


html

<div class="hoge">HOGE</div>


いろいろ調べて試してみましたが、どれも解決できず・・・

http://lealog.hateblo.jp/entry/2013/02/23/185428

http://22century.livejournal.com/3662.html

http://yumeirodesign.jp/blog/201312/csstransforms_fixed.html

30分ほど色々試行錯誤したところ、

「animation-delay」のプロパティ指定を追加したところiPhone実機でもちらつきが無くなり

想定した通りにアニメーションしてくれました!

-webkit-animation : anim 0.3s linear 0s 1 normal;

↑「0S」の指定を追加。


css

.hoge{

display : none;
-webkit-animation : anim 0.3s linear 0s 1 normal;
}

以後、アニメーションを使う時は気をつけよう。。。

===============================

OnederAppliよろしくお願い致します!

ホームページ

iPhoneアプリ

Androidアプリ