JavaScript

Use GPU to pevent flickr and trails (repaints) CSS3 transitions

Sam Deering
Share

So today I was taking a closer look at using the GPU to pevent flickr and trails (repaints) CSS3 transitions. The screenshot shows CSS3 scale repaint leaving trails on chrome. Then later in the post take a quick look at some of the CSS3 control properties.

show-repaints

HARDWARE ACCELERATION

Hardware acceleration is an important milestone for overall render performance in the browser. The general scheme is to offload tasks that would otherwise be calculated by the main CPU to the graphics processing unit (GPU) in your computer’s graphics adapter. This can yield massive performance gains and can also reduce resource consumption on mobile devices.

1-ieration-memory

Frame rate.

1-interation-frame-rate

No trails.?!?

no-trails

Relayouts / Repaints

A possible outcome is that an object that is animated on the screen does not require a single “relayout” of the page while the animation happens. Because a CSS transition is managed by the browser, the fidelity of its animation can be greatly improved, and in many cases hardware accelerated.

Repainting in dev tools.

1-iteration-is-repainting-alot

Repaint only.

-1iteration-paint-only

FPS Counter

To do this simply type “chrome:flags” in Chrome scroll down to the FPS counter, enable it and click on the Relaunch Now button on the bottom of the screen. After enabling it, you should be able to see the FPS rate displayed in the top left corner of your window, indicating that the page is indeed GPU accelerated.

fps

fps-counter-chrome-flags

So do we use Scale or Scale3d?

See an example of scale vs scale3d: https://jsfiddle.net/Hw6AM/2/

Scale3D frams in dev tools.

scale-3d-frames

cubic-bezier Curves and Timing Functions

For 3D animation Bézier curves are often used to define 3D paths as well as 2D curves for keyframe interpolation. Essentially easing functions which control the speed of the animation by setting fixed css co-ordinate points derived from ratios. 

-webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;

Same as the example above, but the speed curves are specified with the cubic-bezier function:

-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
        transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

More on timing functions See Mozila Timing Function.

Timing Functions – More Examples

Pancake Theorem! AMAZING CSS3 TRANSITION PANCAKE RACE (HOVER OVER TRACK)
pancakes

Google CSS3 Rotate with cubic-bezier.
google

CSS3 transition control properties

Let’s take a look at some of the CSS3 transition control properties and any limitations to using them.

-webkit-backface-visibility: hidden;

Useful, note that Chrome displays backface as visible as default. Read more on CSS Tricks Backface Visibility.

-webkit-perspective: 1000;

Doesn’t work too good and only supported by Chrome and Safari. Read more on W3 CSS3 Perspective. 

-webkit-font-smoothing: subpixel-antialiased;

Interesting for those who are developing to target safari. Read more on maxvoltar font smoothing.

-webkit-transform-style: preserve-3d;

Cool effect check out the transform style demo.

useTranslate3d: true;

Google says: “useTranslate3d option to true for smoother (hardware-accelerated) animation on iDevices.” Read more on CSS Animatable Properties.

Resources and further reading

HTML5 Rocks on Speed.

jQuery Animate Enhanced.

Paul Irish on requestAnimationFrame.

Advanced animation demos (uses prototype).

Pretty cool article on css transforms.

GPU CSS.

cubic-bezier easing tool.