The resulting app is a little slideshow of five full-screen slides of kittens, courtesy of placekitten.
- WebKit also offers a simpler 2D method that moves the element on the x or y axis:
translate(x, y)
; onlytranslate3d(x, y, z)
uses the GPU - To be sure that GPU is doing the work, surf to
about:flags
in Chrome, enable the FPS counter, and hit "Relaunch now" button at the bottom of the page. Chrome will now show a red FPS counter in the top-left corner of any screen whenever the GPU is active - There are two useful command-line flags for Chrome to help debugging GPU acceleration:
--show-composited-layer-borders
: shows a red border around elements that are being manipulated at the GPU level. Good for confirming your manipulations occur within the GPU layer.--show-paint-rects
: all non-GPU changes are painted and this throws a light border around all areas that are repainted. You can see the browser optimizing paint areas in action.
Libraries that leverage transitions & translations if present and fall-back to standard DOM style animations otherwise:
-
<div style="position:relative; height:120px;" class="hwaccel"> <div style="padding:5px; width:100px; height:100px; background:papayaWhip; position:absolute;" id="box"></div> </div> <script> document.querySelector('#box').addEventListener('click', moveIt, false); function moveIt(evt) { var elem = evt.target; if (Modernizr.csstransforms && Modernizr.csstransitions) { // vendor prefixes omitted here for brevity elem.style.transition = 'all 3s ease-out'; elem.style.transform = 'translateX(600px)'; } else { // if an older browser, fall back to jQuery animate jQuery(elem).animate({ 'left': '600px'}, 3000); } } </script>
Inspired by: http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
Additional read: http://www.html5rocks.com/en/tutorials/speed/html5/