-2

I've been hearing more and more about CSS3 transitions lately. As a JQuery developer of a few years, I'm totally in love with how solid it is - robust animations that are simple to execute, and wonderful browser support. It's a very rare day that I find a requirement that JQuery can't handle.

Now, it's my understanding that CSS3 transitions have some bugs, and (by nature of being CSS3) limited browser support. It's also lot harder to time oncomplete and trigger events for animations you need to listen to. Some sites even provide a javascript fallback for their transitions/animations, and it seems pretty inefficient to me to have the same information in two places on a site.

From my perspective, there's no reason to stop using JQuery in favor of CSS3 transitions (at least not yet) - yet the practice is becoming more and more common, so there has to be a reason. Why do CSS3 transitions exist?

CodeMoose
  • 2,964
  • 4
  • 31
  • 56
  • I seem to remember people saying the same thing about jQuery animations and flash. – Jeremy Gallant Jun 19 '13 at 18:46
  • 2
    Data belongs in HTML, Interactions belong in JS, and Styles belong in CSS. Many transitions are style effects. They involve quickly iterating rendering loops, and browsers are better suited for implementing smooth animations. – zzzzBov Jun 19 '13 at 18:46
  • Well, for a simple transition including the whole jQuery library is pretty silly. – Wesley Murch Jun 19 '13 at 18:46
  • 1
    Because they are purely presentational in nature. Just like you may have some special CSS styles on button hover, you may use CSS transition to make these special style, say, fade in. Limited browser support? Even better! Those losers still using IE8 deserve to be punished. – Evgeny Jun 19 '13 at 18:48
  • Jeez, ruthless. I spent an hour wording this to be a valid question - I was expecting "CSS3 transitions came about because javascript can't do ___". Why did this get closed? – CodeMoose Jun 19 '13 at 18:49
  • @EugeneXa "Those losers still using IE8 deserve to be punished" AMEN! They should be using IE10, which supports transitions and animations (better than Chrome does, which is still using prefixes...) – Niet the Dark Absol Jun 19 '13 at 18:51
  • This is a duplicate question dear please refer [this](http://stackoverflow.com/questions/10984771/whats-faster-css3-transitions-or-jquery-animations) and [this](http://css.dzone.com/articles/css3-transitions-vs-jquery) – sumitb.mdi Jun 19 '13 at 18:52
  • @zzzzBov I agree with your idea of separation - however, even if transitions are style-based, they're almost never present without interaction. To me, it actually seems contrary to css's purpose to put interaction data inline with static styles. – CodeMoose Jun 19 '13 at 18:56
  • @CodeMoose, the changes you're referring to should be managed via styling hooks. It's very easy to add and remove classes and attributes to hook into styles. – zzzzBov Jun 19 '13 at 19:11

2 Answers2

4

Every feature in web browsers was not well supported at one time. If you prefer jQuery, as a developer, you're free to use it. But if browsers continue to innovate new features, one day support may be more universal. At that time, people will be asking "Why do jquery animations exist since we can do the same thing with CSS3 transitions?" In my opinion, that will be better than relying on a javascript library to do the same thing.

In the mean time, continue using whatever works best for your use case.

recursive
  • 83,943
  • 34
  • 151
  • 241
4

CSS3 transitions exist because it's lighter and quicker than having to meddle with DOM all the time.

CSS3 is much faster as it's a part of the browser engine, and jQuery's transitions and animations use timers and loops internally.

painotpi
  • 6,894
  • 1
  • 37
  • 70