CODEWITHSUNDEEP
javascriptcss
Bachalo
Bachalo

Reputation: 7219

CSS3 vs Javascript only transforms

Impressed by the Apple Safari 360 demo https://developer.apple.com/safaridemos/threesixty.php

It seems to work in Firefox as well.

Can anyone summarize the pros and cons of using CSSonly vs javascript for animations and transforms?

Upvotes: 0

Views: 360

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

My personal opinion is that, using a house as an analogy, HTML is for laying the foundations, CSS is for painting the rooms, and JS is for renovations. If you want to add a water feature, the CSS would be responsible for the appearance of the feature, but the JS would be what makes the water move through it.

Similarly, I could make a clock using CSS and have it rotate using a simple CSS animation (lasting 12 hours for the hour hand, 1 hour for the minute hand, and 1 minute for the second hand), but I would much rather make it in JavaScript as JS would be able to check the user's clock and keep itself in sync. In particular this is important if the browser lags due to the user having too much open on their computer, or just an old computer in general.

Also, I'm pretty sure CSS has to be re-evaluated several hundred times a second for animations, whereas with JS you can explicitly set the framerate to something more reasonable, such as an interval of 250ms for 4 frames per second (more than enough for clocks and progress bars) or 25ms (40fps) for more advanced animations (used occasionally in my sites since they're games). With that kind of control you can manage the efficiency of your site and so on.

On the other hand, CSS transforms are very useful - that's because they affect the appearance of the element, as CSS should. Then, using JS to control them, it's possible to create very complex animations with minimal code (for example in the aforementioned game, there is an entire sequence which would be completely impossible in pure CSS, but is made very easy in JS using CSS transforms).

It's all about using the right tool for the right job.

Upvotes: 3

Related Questions