9

CSS3 では、遷移プロパティを使用して、さまざまなベンダー プレフィックスの下でアニメーションが導入されました。現在、少なくとも純粋な CSS では、要素の位置を変更する方法が 2 つあります。

  1. 要素の位置を絶対位置として設定しleft: right: top:、bottom:
  2. 使用する-vendor-transform:translate(X,Y,Z)

さて、厳密に の点でtransform:translate()、 を使用する能力translateZ()は別として、それらの間の唯一の違いは、後者が報告された値ではないということです。プロパティ自体を解析する以外は、翻訳は計算されたスタイルではありません。しかし、もしこれが必要でなかったとしたら、実際には後者の方が、構成内にあるアニメーションや要素の配置に適しているのposition:fixedでしょうか?

モバイル デバイスとブラウザーで実行する必要がある非常に重い webapp を作成することに特に関心があるため、下位互換性はそれほど問題ではありません。最近のモバイル ブラウザは、少なくとも「最新」である傾向があります。

最終的に、私の質問は、CSS3 の仕様の作成者によると、正確には何のためにあるのでしょうか? transform:translate()-webkit-transform: translateZ(0);ハードウェア アクセラレーション ( ) を使用した場合、レンダリング速度、アニメーションの滑らかさ、および視覚的な安定性のために、かなり優れた方法でそれを使用することは可能でしょうか? 知らない人のために説明すると、ハードウェア アクセラレーション環境では Webkit 要素がちらつくことがあります。

いずれにせよ、CPU と GPU を最も効果的に活用して、非常に最適化された FPS で実行できる (トランジションに関する限り、一部では場合、スクロールが関係します) 最も望ましい滑らかさのタイプの良い例は、これhttp://www.webkit.org/blog-files/leaves/です(はい、私はそのソースを読みました.)

入力はありますか？

4

3 に答える 3

5

これが古い投稿であることは知っていますが、同じ質問を疑問に思ったときに、この記事が非常に役立つことがわかりました。

http://css-tricks.com/tale-of-animation-performance/

于 2012-12-26T15:06:14.023 に答える
2

CSS3 の仕様の作成者によると、transform:translate() は正確には何のためにあるのでしょうか?

それは言います：

既存の SVG コンテンツとの後方互換性のために、この仕様は [ SVG11 ]の 'transform' 属性で定義されたすべての変換関数をサポートします。

あなたの質問の他の部分については、一般的な答えを出すことができるかどうかわかりません.

特定の状況でパフォーマンステストを実行するのが最善だと思います。アプリが適切に設計されていれば、これは難しいことではありません。また、このような設計により、変換とオフセットがそれぞれ使用されるデバイスごとの最適化が可能になる場合があります。

于 2012-06-20T03:06:49.783 に答える