Which is better to use for css or js animations? And why?

Question

css

When creating a complex animation, but which can be implemented using both css and javascript - which direction is preferable?

Answer 1

but which can be implemented using both css and javascript ...
I wanted to hear your opinion

I myself like to do everything in CSS, but ... If the animation needs to be interactive and you need to stop it in the process, roll back to its original position, etc., or some of its parts depend on data (in a broad sense, this is movement complex trajectory, and plotting, etc.) and it is easier to calculate them with a script than to select coefficients in CSS keyframes, then JS will be the best choice. If it's a series of little-related changes, then again scripts will almost always be easier to implement. When it comes to CSS animations with filters (especially SVG filters), you can run into very severe performance problems on weak hardware. And no GPU hacks will help here - it will still slow down. In such a situation, it may make sense not only to write in JS, but also to connect WebGL and do everything manually on shaders.
In other cases, it's worth looking at the situation - different :hover / :focus effects are usually easily implemented in CSS, and if so, why invent something? CSS has been really good lately. But if, for example, in a project all animation is done in JS, then it may make sense to continue doing the same, while maintaining uniformity in the code.

Answer 2

We need control over the animation process and further expansion of the functionality - js
We need to make a primitive animation with minimal CPU costs - css
Chaotic switching on and flashing of lights - better through keyframes on css.
But breaking them on click / tap with sound, flashes and glasses is better through js.

Answer 3

If you can implement animation using only the transform, opacity and filter properties, then CSS is better.
CSS animations will be more GPU efficient as long as they don't call repaint.
The principle is well described here:
https://developers.google.com/web/fundamentals/per...

Answer 4

Better css as long as you don't need something complicated that css can't do.

Answer 5

Sometimes CSS is enough (and that's great), sometimes CSS gives in to JS even in those cases when it would seem that it shouldn't ( here , for example, in order to achieve adequate work in older browsers, everything had to be rewritten in JavaScript).
In addition, there are many nuances (it is better to animate movement through translate than top and left, et cetera), which must be taken into account regardless of the selected tool.
Probably, it is not very reasonable to cut ALL animations on one thing, it is worth choosing based on the wishes for the result and time constraints.

Answer 6

Easier and less js code. But if this is a simple animation, you can also use css.
IMHO