What’s the difference between css and javascript animations?

Asked

Viewed 837 times

8

Lately I’ve been studying some animations with CSS. However, researching more on the subject, I ended up verifying that it is possible to make animations also with javascript.

  • What’s the difference?
  • Which is more viable?

I know that animations with CSS limit depending on the browser, the same happens with Javascript?

javascript css
  • 1

    What do you mean "animations with CSS limit depending on the browser"? Could explain this excerpt better?

  • 1

    those times I asked the same here http://answall.com/questions/59798/%C3%89-correct-use-js-to-do-the-effects-of-an-html

  • 1

    Related / possible duplicate: http://answall.com/questions/51542/css-ou-jquery-para-anima%C3%A7%C3%A3o

  • @Renan, try to run some animation on IE8 or IE7.

  • @Andreyhartung It’s not the same question because my question was not about using javascript to manipulate css, however, pitting one against the other for creating animations. Anyway, your question also helped my studies! Thank you!

  • @bfavaretto Very related, however, as it was posted below, the use of Jquery decreases in terms of performance, different from CSS which is faster. And in this case, I was looking for a purer javascript animation - and suggested GSAP! Thanks for sharing another link as well!

  • @Wesleyredfield but, if you think about it, there are also modern features in Javascript to handle animations that don’t work in those browsers you mentioned. But finally...

  • @Renan Please, if you have fonts that strengthen this you are saying, please share it with us! Thanks!

  • @Wesleyredfield window.requestAnimationFrame is an example.

Show 4 more comments

1 answer

11


The CSS3, is not yet ready for professional level animations in large scalable projects. For simple things, - CSS3 is the winner, we can’t even argue about it. If you’re looking for animations mais robustas we will examine the following points:

1. The flow control

Imagine you spent nights writing incredible, cutting-edge animation codes on pure CSS3. And now - here comes the hard part. You want to control them - pause, stop, turn, run asynchronously, one after the other, put in a timeline and time line. Well, good luck with that. Literally, it’s almost impossible. With javascript solutions (like GSAP) it’s easy as making a pie! Write a few lines of javascript code and you’re ready to go!

2. Animating several properties

Imagine that you want to scale a div and in the middle of this animation, they start to rotate it and change the color of the border. You cannot animate individual properties distinctly. However, JS-based solutions allow you to literally animate any numerical property in a variety of forms (just write Animate to 50% of the initial width, Animate to 0px, Animate to -50px and then to 150px) .

3. Organisation

Code for larger projects can easily change and you may have to write complex animations, this is when code organization is the key! With CSS3 it is almost impossible to group your animations into logical chunks to manage easily, just calling methods and callbacks.

4. Compatibility

CSS3 transitions do not work in older browsers. What’s more - each browser handles them differently (and adds its own mistakes to your application). With few animations on your page it’s probably easier to check if everything goes well, but it can become impossible once you go to a larger project. Javascript solutions provide an abstraction layer. You don’t have to worry about specific browser behaviors This is where libraries are doing their job!

Completion

CSS animations are "bad"? Certainly not! In fact, they are great for simple transitions between states (such as rollovers), when compatibility with older browsers is not required. CSS does transformations very well, and CSS animations can be very appealing to developers who prefer to put all their animation and logical presentation in the CSS layer. However, Javascript-based animation offers much more flexibility, better workflow for interactively rich and complex animations, and often runs as fast (or even faster) than CSS-based animation.

Summary:

css3:

  • Positive point: fast
  • Negative point: Animation is primitive

js:

  • Plus: Animation (math) can have sophisticated methods, much more interactive for the user
  • Downside: Some browsers might block js, it might be heavy, has charging time

In that website has a nice comparison, with animations, performance test and more! Take a look.

Source

  • 1

    Damn, I’ve been after that explanation for a long time, if I could I’d give you a truck of upvotes!

  • Worth a look at this link, originally posted here. I also thought you could say that animations by CSS are always faster, but the article proves that.

  • I had already posted the link in answer :D

  • @Paulocosta Both your answer and the source you provided helped me a lot! It’s great to know that there are studies and concerns about this! Just to check, you typed wrong up there (it’s GSAP, not GASP). In short, common sense is what you get at the end. And I’ll research more on GSAP.

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.