Menu
You can take advantage of hardware accelerated animations by setting an animation duration and setting the initial and final values of the CSS3 transform.
What if, instead of setting an animation duration and using keyframes, you animate the value of the desired CSS3 transform directly with JavaScript? Will you still be taking advantage of hardware acceleration, or is the hardware acceleration ruled out?
458
Hardware-Accelerated CSS on Desktop and Mobile BrowsersCSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser's slower software rendering engine.
JavaScript libraries are an extremely valuable tool for any web developer. Adding simple animations can easily be done with CSS, but as soon as it comes to more complex or advanced effects, JavaScript is the better tool.
Because — despite jQuery being tremendously powerful — it was never jQuery's design goal to be a performant animation engine: jQuery cannot avoid layout thrashing due to its codebase that serves many purposes beyond animation.
CSS allows animation of HTML elements without using JavaScript or Flash!
It won't be hardware accelerated for webkit browsers unless you use transitions. Also, only 3d transforms are accelerated, so a quick way to ensure that the element is going to use the 3d rendering tree if it's avaliable is to add:
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
The reason transforms are quick by the way, is because by definition they don't affect any other elements - this means the browser doesn't need to repaint the whole window, just the part that's being transformed.
The old way of animating should really be considered obsolete, as it is much less efficient than transitions, and generally has a lower framerate, particularly on iOS.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
