-
ID:kSPK6u さんの質問

css3のアニメーションとjquery.transit.jsについて

css3のアニメーションに関して、疑問に思うことがあり質問させていただきます。

css3アニメーションは処理スピードが早いことのメリットがあげられます。
そこでjquery.transit.jsを使用して、absoluteを指定している要素にleftの値を変化させるアニメーションをつくりました。
実験したのは次のパターンです。

①leftの値を200にする
②transition.jsのx(translateX)の値を200にする

そうすると、②の方が断然スムーズにアニメーションが再生されました。
私の認識では、css3のtransitionアニメーションを使用することによって処理スピードが向上すると思っていたのですが、変化させる値によっても処理スピードに変化がありました。

ここで3点質問です。
1.translateXのように、css3の値をアニメーションさせないと処理スピード向上には繋がらないのでしょうか?
2.leftのような既存のcss3の値でも少しは向上しているのでしょうか?
3.このようなアニメーションの処理の確認を視認で行っているのですが、実際はどうすべきなのでしょうか?

何卒、よろしくお願い致します。

みんなの回答 6 件

ID:r408Lh さんの回答

わかりません。

ID:XFgm8W さんの回答

  1. はい
  2. 処理方法自体はかわってないので、ブラウザ自体の処理や、ユーザー環境のパフォーマンスに依存
  3. ChromeのDevToolなどでプロファイラーを見ましょう

ID:COgx0t さんの回答

transformを使ったのアニメーションの方が滑らかですよ。
GPU使うんじゃなかったかな。

ID:.JG9Ys さんの回答

CSSなら何でも軽いわけじゃないよ。
GPUスイッチ入るようにコード書かないと。

ID:hqQFPh

ご回答ありがとうございます。
GPUにスイッチが入るようにとは、具体的には、transitionアニメーション(css3のアニメーション機能)を使って、translateX(css3のプロパティ)を変化させればよいのでしょうか?
※例えばleftのようにcss2のプロパティをcss3のアニメーションを使用してもGPUのスイッチは入らないのでしょうか?)

ID:jNmpEu

GPUを使ってもらうようにするにはハックでなくwill-changeプロパティを使ってください。
そちらのほうが効率的です

ID:uHSQ7L さんの回答

この辺り参考になりますよ。

abab

https://w3g.jp/blog/studies/web_gpu_adopt
ID:hqQFPh

ありがとうございます、見てみます。

ID:udj7dY さんの回答

個人的に色々とCSSのアニメーションをテストしていた際は、
topやleftなどのposition値よりもtransformでの座標値の方が、
格段に処理速度が向上しました。

最終更新日:2014-09-09 (2,746 views)

関連するトピックス

ページ上部に戻る