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

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アプリ