Whether to use css animations or js? And why?

When creating complex animations, but which can be implemented with css and javascript - a choice in which side is preferable?
March 12th 20 at 08:07
7 answers
March 12th 20 at 08:09
Solution
but which can be implemented using css and javascript...
your opinion wanted to hear

I like to do everything in CSS, but... If the animation needs to be interactive and need to stop her in the process, to roll back to its original position, etc., or some parts of it depend on data (in the broad sense is a motion on complex trajectories, and plotting, etc.) and they are easier to calculate with a script than to find the coefficients of keyframes in CSS, then JS would be the best choice. If is a sequence of small interconnected changes, the scripts will almost always be easier to implement. If we are talking about CSS animations with filters (especially SVG filters), you can fly in a very strong performance issues on weak hardware. And no khaki GPU will not help - it will still be slow. In such a situation, it may make sense not just to write on JS, but also to connect WebGL and doing everything by hand on the shaders.

In other cases it is necessary to look at the situation different :hover / :focus effects are usually easily implemented in CSS, and if so, what for something to invent? CSS recently very good. But if, for example, in the project all the animation is done in JS, it might make sense to continue to do the same, keeping the uniformity in the code.
March 12th 20 at 08:11
Here all is chewed
I don't chew, your opinion and would like to hear) - chauncey commented on March 12th 20 at 08:14
March 12th 20 at 08:13
Need control over the animation process and the further expansion of functionality - js
You need to make a primitive animation with minimal CPU - css

Example:
Chaotic on and lights flashing - it is better using keyframes in css.
But breaking them by clicking/Tapu with sound, flashes and lenses - better with js.
You saprissa to do chaotic flashing on CSS. - Silas_Feil51 commented on March 12th 20 at 08:16
@Silas_Feil51, It is chaotic visually, but not programmatically. Software and of course the frames in a circle with different timings with the delay of the change in the style. So... there's nothing complicated here.
And bonus, the CPU consumption is minimal. - Marguerit commented on March 12th 20 at 08:19
@Marguerit, the human eye easily recognizes up to 5-10 second loop. Must be a complete moron to describe such animations in karamah. - Silas_Feil51 commented on March 12th 20 at 08:22
@Silas_Feil51Just for the beginner is, indeed, implicitly and looks difficult to understand, so let me explain:
1. State transitions - recognize the brain, not the eyes.
2. Not recognize the loop, if it is done correctly.
3. And the most difficult: CSS effects - can be "applied" in time with each other, if they change different properties of an object is to combine getting from a lot of different combinations. - Marguerit commented on March 12th 20 at 08:25
March 12th 20 at 08:15
If you can implement animation using only the properties of the transform, opacity, and filter - better at CSS.

CSS animations will be more productive through the use of the GPU as they do not cause the repaint.
Well here's how:
https://developers.google.com/web/fundamentals/per...
March 12th 20 at 08:17
Better css, you don't need something complicated that css does not work.
March 12th 20 at 08:19
Sometimes it is enough CSS (and that's great), sometimes succumb to CSS, JS, even in cases where, it would seem, should not (here, for example, to achieve an adequate work in older browsers, I had to rewrite everything in JavaScript).

In addition, there are many sorts of nuances (animate movement using translate better than top and left, et cetera) that must be considered regardless of the chosen tool.

Probably not very wise to cut ALL animations on one thing, it is necessary to choose proceeding from wishes to results and time constraints.
March 12th 20 at 08:21
Easier and less code in js. But if it's simple animation and css.
IMHO

Find more questions by tags AnimationJavaScriptCSS