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 件
わかりません。
transformを使ったのアニメーションの方が滑らかですよ。
GPU使うんじゃなかったかな。
CSSなら何でも軽いわけじゃないよ。
GPUスイッチ入るようにコード書かないと。
この辺り参考になりますよ。
abab
https://w3g.jp/blog/studies/web_gpu_adopt個人的に色々とCSSのアニメーションをテストしていた際は、
topやleftなどのposition値よりもtransformでの座標値の方が、
格段に処理速度が向上しました。
関連するトピックス