web-dev-qa-db-ja.com

iOS /モバイルSafari用にCSS 3アニメーションを最適化する適切な方法は？

PhoneGapを使用してiPadアプリを構築しています。アニメーションにCSS変換を使用しようとしていますが、デバイスがサポートする可能性のあるハードウェアアクセラレーションを活用するために適切な方法を使用しているのかどうかはわかりません。

ページの上部から下にスライドするモーダルウィンドウ（DIV）です。それは画面の一番上に配置され始め、jqueryを介してクラスを追加することでページ自体にアニメーション化されます：

.modal {
      background: url('../images/bgnd-modal.png');
      width: 800px;
      height: 568px;
      position: absolute; 
      top: -618px;
      left: 100px;
      z-index: 1001;
      -webkit-transition: top .25s ease-in; 
  }
.modal.modalOn {
      top: 80px;
  }

IOS 4を搭載したiPad 2に展開すると、これは機能しますが、アニメーションは少しぎくしゃくしています。完全に滑らかなアニメーションではありません。これを処理するために別のCSSを使用する必要がありますか？または、これはおそらくPhoneGapアプリであり、問​​題のDIVが大きな背景画像を持っていることの単なる副作用ですか？

ioswebkitcss-animations
38
DA.

少なくとも空のtranslate3d宣言を追加する必要があります。

_transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
_

これは、iOSでハードウェアアクセラレーションを使用するため、 Remy Sharp で示されているように、iOSでのパフォーマンスに非常に役立ちます。

さらに先に進みたい場合は、「トップ」プロパティをアニメートするのではなく、Webkit変換トランスフォームを使用するようにアニメーションをリファクタリングします。 transform3dプロパティでは、2番目のパラメーターはY値です。例では、_-webkit-transition_を変更して、topではなく、transformプロパティに焦点を合わせます。次に、translate3d(0,0,0)の最初の_webkit-transform_を設定します。

アニメーションを実行するには、クラス_.modal.modalOn_宣言を次のように変更します。

_transform: translate3d(0,80px,0);
-webkit-transform: translate3d(0,80px,0)
_

これにより、iOSは要素の変換をアニメーション化し、最初の方法よりもさらにスムーズになります。

-注-pxやemなどの測定単位を追加することを忘れないでください。transform: translate3d(0,80,0);などは機能しません。

94
Benjamin Mayo

追加してみてください：

webkit-backface-visibility: hidden;
3
Alon