Reputation: 10250
i was just going through the source of odoeter.js and came across the following line of code ::
<!-- Force 3d acceleration always and forever :) -->
<div style="-webkit-transform: translateZ(0)"></div>
what is this for ? i don't quite understand .
I am refering to this page of odometer.js .
can somebody explain this with a simple example ?
Thank you.
Alexander.
Upvotes: 0
Views: 73
Reputation: 73251
By using translateZ (or another 3d animation) you are enabling hardware acceleration for your animations, even if it's a fake 3d animation like 0
, as it doesn't do anything but enabling HA. HA will improve the animations smoothness. If you are planing to use javascript for animations, I'd have a look at velocity.js which outscores jQuery's animate() by far. Have a look here for comparisons.
To further improve the animations speed, make sure to add
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;
To your animated elements.
Upvotes: 1