Animations on updating
When you spin off other threads there's overhead involved with managing that process.Since graphics rendering and document layout eat up the most processing resources (by FAR) in most animations ( calculating the intermediate values of property tweens), the benefit of using a separate thread for interpolation is minimal.So part of the reason Java Script animation got a bad reputation is what I call the "j Query factor".The most frequently cited reason for using CSS for animation is "hardware acceleration". Let's break it down into two parts: The GPU is highly optimized for tasks like moving pixels around and applying transform matrices and opacity, so modern browsers try to offload those tasks from the CPU to the GPU.Don't buy the myth that CSS animations are always faster, and also don't assume that the speed test above reflects what you'd see in your apps. Some browsers allow you to pause/resume a CSS keyframes animation, but that's about it.You cannot seek to a particular spot in the animation, nor can you smoothly reverse part-way through or alter the time scale or add callbacks at certain spots or bind them to a rich set of playback events.
So again, transforms and opacity are the primary beneficiaries.
Java Script provides great control, as seen in the demo below.
See the Pen Impossible with CSS: controls by Green Sock (@Green Sock) on Code Pen Modern animation is very much tied to interactivity, so it's incredibly useful to be able to animate from variable starting values to variable ending ones (maybe based on where the user clicks, for example), or change things on-the-fly but declarative CSS-based animation can't do that. rollovers or expanding menus, etc.), CSS Transitions are great.
As interactive projects got more aggressive and mobile devices burst onto the scene, performance became increasingly important.
Java Script-based animation was treated as if it was antiquated and "dirty".