13

Every time I visit a page with CSS3 animations, my notebook becomes noisy (gives me a signal that it does some heavy job on there). I wouldn't care myself if at least resulting animations were smooth enough. But they are not. What I get as a result on my 2.4 GHz Core 2 Duo with 8GB of RAM and dedicated NVIDIA GeForce 320M (not much, but should be enough for some css, no?...) is some jerky, randomly flickering, in some cases having weird artifacts... "animation", that is often worse then it's JS equivalent...

Has anyone done any comparisons of JS vs CSS animations? Or benchmarking of proposed CSS3 goodies for real-world usage (for example how many of them can be on the page simultaneously without serious hang, etc)? Are there any best practices (like - do this, do not do that, or your browser will crawl - and such)?

4

4 に答える 4

18

I've done a few project with CSS3 transitions and Jquery .animate() fallback when CSS3 is not supported.

I've three testing computers besides my own :

  • a 6+ years laptop (running XP, Athlon 1800+ and 768Mo of Ram)
  • a 3 years laptop (running Crappy Vista and a dual Core Intel CPU with 2Go of Ram)
  • a franken desktop (a few OS installed with a P4 and 1Go of ram)

What I observed is that most of the times, CSS3 performs better.

What I mean by "performs better" is only that it "feels better" : I did not try to benchmark the perfs, nor to apply a scientific testing method, and my observation should not be taken for more than an empiric feel. Also note that I mainly use CSS3 transitions and not CSS3 Animations (ie with keyframes).

However, "better" does not here mean "always good". On the older computers, Javascript and CSS3 are equally laggy. If your site is JS or CSS3 heavy, IEs before version 9 are always a poor experience, IEs before version 8 always a true nightmare. Firefox before v4 is better but far than perfect on older computers.

In all case, CSS3 must be correctly applied : e.g I found that fading a div to opacity: 0 without setting display:none when finished is always a bad idea... CSS3 transition are quite new that no real best practices exists, it's trial and error for now.

On modern mobile devices (I own a few IOS, Android and BBOS devices), the CSS3 is always way better than Javascript : on an iPad 1, a simple $('img').fadeOut() can be quite ugly when the CSS3 transition is clean.

So, to conclude, my personal (and limited) experience tells :

  • css3 is often better than Js, especially for modern mobile devices
  • though both are bad on poor computers/browser combination when overused
  • as usual, it depends on your users. If they have state of the art Macbooks, you can use a lot of animation without fear. If they are poorly equiped, animations could seriously hinder their browsing experience.
  • I think the best is to do CSS3 transitions with a Jquery fallback if not supported, and keep 'em simple (ie not animating four properties on three different elements at once)

I hope it helps.

于 2011-10-23T17:07:21.163 に答える
12

CSS3 uses GPU acceleration in some browsers, which means if you got a great GFX card, will result in smooth, fast animations. Where CSS/JQ uses your memory.

So i don't really think it's possible to a hands down benchmark test comparison.

About how many animations you can use, with the browser being updated so frequently and the hardware being a factor, it's going to be very hard to do such "usage guides".

Haven't seen any for JS either :)

For more on GPU acceleration see:

http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell

There are some great articles on the subject though:

http://www.netmagazine.com/opinions/css3-vs-javascript

http://www.whatcreative.co.uk/blog/tips/the-benefits-of-css3-vs-jquery/

于 2011-10-23T16:19:35.127 に答える
2

いくつかのプロジェクトの制作環境でcssアニメーションを使用した後、それはかなり苦痛だと言わざるを得ません。

また、以前Flashでよく使用していたお気に入りのアニメーションライブラリであるTweenLiteも使用しています。これは、JavaScriptとCSS用に書き直されています。

html5アニメーションの経験が十分にあるので、TweenLiteが最も適したツールであると確信できます。

以前はWeb開発者にcssアニメーションとトランジションを使用し、古いブラウザーのフォールバックとしてTweenLiteを使用していましたが、最新のブラウザーのパフォーマンスをCSSおよびTweenLiteと比較すると、ほとんどの場合、TweenLiteバージョンが最もスムーズです。

開発者が書いたばかりのこの記事のために、これらのテストを実行しました。

http://www.greensock.com/transitions/

GSAPは、これを利用しrequestAnimationFrameて超最適化されています。それはcss3と同等のパフォーマンスを持ち、シーケンス、制御、コールバックのためのはるかに優れたAPIを備えています...

選択の問題！私は私のものを作りました。

于 2013-01-08T17:05:04.047 に答える
2

This is new (from December 2012), by Greensock: http://www.greensock.com/js/speed.html

You can benchmark and compare css3 animations with javascript animations on frameworks like jQuery, YUI, Zepto, Mootools, Dojo, TweenJS and GSAP, too.

于 2013-02-17T09:02:45.073 に答える