Pro CSS3 Animation

ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt

There are several possible ways to improve CSS effects that run slow on mobile devices:

•    Try to funnel transitions and optimizations through the GPU of the device: Due to their

more complex and demanding nature, many browsers will attempt to smooth 3D

transforms, transitions, and animations (covered in Chapter 9) by pipelining them

through the specialized Graphic Processing Unit of the device on which the CSS

animation is running. You can hitch a ride on this optimized stream by starting a CSS

declaration block with an “empty” 3D manipulation that will not visually alter the

element, but will allow access to the GPU to the 2D transforms that follow in the

same declaration:

transform: translate3d(0,0,0);

■ Note remy Sharp has a very effective video showing the advantage of funneling transitions and optimizations

through a device’s gpU on Youtube at http://www.youtube.com/watch?v=IKl78ZgJzm4.

•    Limit or substitute animations with media queries: You can set up more limited versions

of animations for mobile devices by creating different versions under an @media query.

•    Ensure that pages containing animated elements will scale down completely to mobile

screen sizes: Animations that are cut off at the edges will obviously not look good or

perform effectively on a mobile device.

Integrating CSS3 Media Queries with SVG

You can also use media queries (among other CSS3 features) to target elements in SVG.
Just like Adobe PhotoShop and other graphics applications, SVG includes the concept of multiple layers.
This means you can merge multiple drawings into one SVG file and switch the visibility of each using CSS.
Let’s return to the idea of placing icons in the top-right corner of the browser window, but make them SVG
instead; in this case, a series of grouped SVG drawings of different body types, including the mesomorph and
ectomorph types. For the sake of space, code for only the first body type is shown in the simplified Listing 8-8.

Listing 8-8. SVG File of Multiple Drawing Layers

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="142px" height="340px"
viewBox="0 0 142 340">