This chapter is from the book
This chapter is from the book
This chapter is from the book
Hardware Acceleration
Later in this book, when you understand the basics and begin to tackle more complex animations, the question of performance becomes very important. In order to optimize the ways your CSS3 animations run, you will use hardware-accelerated properties as much as possible. Hardware acceleration is the ability of certain devices to offload work from the CPU to the GPU (the graphics processing unit, more commonly referred to as simply “the graphics card”). In order to view hardware acceleration, you can take advantage of some features in Chrome and Safari.
In CSS3 there are a few properties that can take advantage of hardware acceleration:
- CSS3 transitions
- translate3d
- translateZ
Chapter 3 discusses CSS3 transitions, and Chapters 6 and 7 explore translate3d and translateZ. The best way to see if using these properties is having an effect is to color any hardware-accelerated layers in a distinctive way so you can easily see them. You can achieve this in both Chrome and Safari by setting certain browser options.
Viewing Hardware-Accelerated Layers in Chrome
To view hardware-accelerated layers in Chrome, you can simply type about:flags into the URL bar. This launches the currently available experimental features in Chrome, including composited render layer borders. After you change the setting, you reboot Chrome in order to see the change take effect.
For example, you can apply a green border to any layer that is being composited on the GPU. Figure 1.5 shows the results that Chrome displays when you view a scene from Anthony Calzadilla’s impressive CSS3-driven Madmanimation animation (http://animatable.com/demos/madmanimation/).
)
Figure 1.5. Chrome’s composite render layer borders feature in action at http://animatable.com/demos/madmanimation/
Viewing Hardware-Accelerated Layers in Safari
To view hardware-accelerated layers on a Mac, you launch the Terminal application (which can be found at Applications > Utilities > Terminal) and type in the following command:
$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari
All hardware-accelerated layers are then shaded in red, as shown in Figure 1.6.
)
Figure 1.6. Safari’s hardware-accelerated layer coloring in action at http://animatable.com/demos/madmanimation/