Chapter 2

CSS3 Transforms

While CSS Animations can be used to alter almost every aspect of an HTML element (with the exception of the properties listed in the previous chapter), some of the most powerful means of manipulating the presentation of web pages lie in the CSS Transforms and Transitions modules, which are entirely new in CSS3.

CSS Transitions are the very simplest form of animation: a movement between two states. Once you master the fundamental syntax for transitions described in this chapter, you will be able to apply simple, effective animations to images (described in Chapter 3) and user interface elements (described in Chapter 4), and then begin to create more complex keyframed animations (described in Chapter 5 and beyond).

CSS TransformsTransformation, CSS

There are four main Transformation, CSSdescriptionCSS translation functions: translate, rotate, scale, and skew. The functions are combined in the matrix transformation function. You’ll apply these transformations to a standard web page layout of an image floated next to a paragraph of text as shown in Listing 2-1.

Listing 2-1. HTML5 Code for a Floated Image
<!DOCTYPE html>
<html>
<head>
<title  >
Simple CSS3 Transformation</title>
</head>
<body>
<p>  <img src="dudley-storey-statuette.jpg" alt="Student-made statuette of Dudley Storey" style="width: 300px; height: 300px; float: left; margin: 0 2em 1.4em 0;"  >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, facilisis in auctor semper, pharetra quis mi...</p>
</body>
</html>

The code shown in Listing 2-1 will produce the layout shown in Figure 2-1.

Figure 2-1. An image floated with paragraph text

With this basic page in place, you can start to apply transforms to the image element.

RotateTransformation, CSSrotation transformation

First, you’ll transform Transformation, CSSrotation transformationdescriptionthe image by rotating it (see Listing 2-2). Values for CSS3 rotation transformations can be specified in degrees, gradians, turns or radians, using positive or negative floating-point values to create clockwise or anticlockwise rotation. You must include vendor prefixes to cover all browsers.

Listing 2-2. Inline CSS to Rotate an Image
<img src=
"dudley-storey-statuette.jpg" alt=
"Statuette of Dudley Storey" style=
"width: 300px; height: 300px; float: left; margin: 0 2em 1.4em 0; -moz-transform: rotate(7.5deg); -ms-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); transform: rotate(7.5deg); ">

The result of the code in Listing 2-2 is shown in Figure 2-2.

Figure 2-2. A floated image with a CSS rotate transformation

While measuring rotation in degrees is the most common approach when writing CSS transformations, CSS3 allows a variety of units, shown in Table 2-1:

Table 2-1. Possible unit systems for the CSS angle data type
Unit CSS Description Example
Degrees deg 360 degrees in a circle rotate(90deg)
Gradians grad Also known as “gons” or “grades”. 400 gradians in a circle, making for easier calculations. rotate(100grad)
Radians rad 2π radians in a full circle, equal to 6.2831853rad. rotate(1.57rad)
Turns turn A complete rotation  =  1 full turn. rotate(.25turn)

There are a few things to note when floating an image using rotate:Transformation, CSSrotation transformationfloating an image

  • Other HTML content on the page is not affected by transformations: the layout of the paragraphs does not change in response to the image rotation; further rotation of the image would cause it to overlap the text. (Content that reacts to transforms is supported in the CSS Regions Module).

  • The Document Object Model (DOM)Transformation, CSSDOMDocument Object Model (DOM) is similarly unaffected; the value of properties for the transformed element such as offsetWidth will also be unchanged.

  • CSS transformations essentially impose a state of relative positioning on the affected element; the original space used by the element is retained.

  • If the value of the overflow property is scroll or auto, scrollbars will appear as needed to enable you to view content that is transformed outside the visible area.

  • The rotation occurs from the computed center of the element, the transform-origin.

  • Other CSS appearance rules applied to the element, such as box-shadow, are applied before the transformation, so they will be rotated with the effect.

  • Rotating the image by 180 degrees will not flip or mirror it; that can be achieved using a hack of the scale transformation, discussed later in this chapter, or a 3D rotation, discussed in Chapter 9.

  • You can rotate any HTML content you wish, but from a design perspective it is not recommended that you rotate text: doing so reduces legibility and induces a painful crick in the neck for your readers.

  • The unit of measurement needs to be present, even if the amount of rotation is 0. In most CSS measurements, 0 is 0 for any unit, (i.e., width: 0 works as an alternative to width: 0px.) But when rotating to 0, you must specify transform: rotate(0deg); transform: rotate(0) will not work.

As you can see, inline styles for transformations can be lengthy due to the requirement to include vendor prefixes. It is much more common to create transformations separately, as a class or id in an embedded or linked stylesheet (see Listing 2-3).

Listing 2-3. An Embedded CSS Stylesheet for Transforming an Image
<!DOCTYPE html>
  <html>
  <head>
  <title>
  Simple CSS3 Transformation</title>
  <style>
  img.tilt {
    width: 300px; height: 300px; float: left;
    -moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);
    -ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);
    transform: rotate(7.5deg);
    }
    </style>
    </head>
    <body>
    <p>
    <img src=
    "dudley-storey-statuette.jpg" alt=
    "Statuette of Dudley Storey" style=
    "margin: 0 2em 1.4em 0; class=
    "tilt" >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, facilisis in auctor semper, pharetra quis mi...</p>
    </body>
    </html>

To rotate the image as if it were pinned at its top-right corner, you must move the element’s transform-origin to that location, as shown in Listing 2-4.

Listing 2-4. Rotating an Image from a Corner
img.tilt {width: 300px; height: 300px; float: left;-moz-transform-origin: right top;-o-transform-origin: right top; -ms-transform-origin: right top;-webkit-transform-origin: right top; transform-origin: right top;-moz-transform: rotate(−10deg); -o-transform: rotate(−10deg);-ms-transform: rotate(−10deg); -webkit-transform: rotate(−10deg);transform: rotate(−10deg);}

The code in Listing 2-4 will create the result shown in Figure 2-3; note that I’ve had to change the image’s inline style slightly to provide it with more space for the margin on the right-hand side to compensate for the new angle of the image.

Figure 2-3. Rotated, floated image with paragraph text

transform-origin takes values the same way background-position and other properties that combine a horizontal and vertical offset do. The values are specified as the horizontal position of the origin point followed by the vertical position, relative to the element itself. The values can be specified as keywords (top, center, bottom, left, and right), numerically, or as a combination of the two. They can also be outside the area of the element itself (for example, to create a transformation origin axis above or below the element, as shown in the “card fan” image gallery example in Chapter 3).

The Webkit CSS3 Transform Aliasing IssueTransformation, CSSwebkit CSS3 transform aliasing issue

Early versions of Chrome and Safari (up to version 5.1) contain a rendering bug: when transforming some elements, the browsers will not antialias the edges of rotated or skewed HTML content, resulting in so-called “jaggies” or “staircasing” on the edges of images, as shown in Figure 2-4.

Figure 2-4. Zoomed image, showing aliasing of edges on an image rotated with CSS transform

There are various techniques for getting around this bug :

  • Apply a 1-pixel white border around the element.

  • Apply webkit-backface-visibility: hidden; to the element.

  • Add another transformation to the element, such as -webkit-transform: rotate(−10deg) translateZ(0);.

There is no single technique that best addresses the rendering bug in all circumstances, however; the effectiveness of each technique depends on the context of the element being rendered.

ScaleTransformation, CSSscale transform

The scale transform is something of an oddity when applied to images: given that changing an image’s height and width will have much the same visual result, it might not seem useful. The difference is that scale can be applied to any HTML element: changing the width of a paragraph will reflow the text content, but altering its scale will make the text physically larger or smaller.

The value for scale is a multiplier: scale(2) applied to an element will make it appear twice as wide and twice as high (in other words, four times its normal size), while scale (.5) will result in an image that is one-fourth its original size. scale will transform the element equally in all directions. You can also apply scale to ordinal directions: X (horizontal), Y (vertical), and Z (depth).

Flipping Images with scaleX

You can use the scale CSS transformation to effectively mirror HTML elements (usually images, although in principle this technique could be applied to any element). If scale starts at 1, as shown on the left side of the diagram in Figure 2-5, the affected element will grow smaller as you lower the value of scale until you reach 0, when the image disappears. If you push the value into negative territory, the image will begin to grow again, but will appear flipped horizontally, as shown on the right side of Figure 2-5.

Figure 2-5. Effect of using small and negative values of scaleX()

You can use scale to quickly flip an image on a page, rather than processing it through an application such as Adobe PhotoShop to generate a new copy. Listing 2-5 shows how the transformation could be applied to reverse an image of Abraham Lincoln.

Listing 2-5. Flipping an Image with an Inline Transform Style
<img src="lincoln.jpg" alt="Abraham Lincoln, 1863" style="width: 389px; height: 480px; -moz-transform: scaleX(−1); -o-transform: scaleX(−1);  -ms-transform: scaleX(−1); -webkit-transform: scaleX(−1); transform: scaleX(−1);">

Figure 2-6 shows the outcome of the code in Listing 2-5.

Figure 2-6. Original photograph of Abraham Lincoln (left) flipped using CSS3 scale transform (right)

Using CSS techniques like this, you can adjust images on the fly instead of having to return to PhotoShop, make the changes, then save and upload the file to the site, and without having to modify any HTML code.

TranslateTransformation, CSStranslate modifier

Like scale, the translate modifier might seem a bit redundant at first: it uses the same coordinate system (and visually, produces the same result) as applying top, left, bottom, and right properties to a relatively positioned element. However, as you will see, translate can make it easier to animate HTML content.

translate(x,y) moves the element in horizontal and vertical directions by using positive or negative values. translateX() moves the element in the horizontal plane, while translateY() moves it vertically.

For example, if you wanted to move the statuette image shown in Figure 2-4 up 4em and to the right by 50px, you’d use the code shown in Listing 2-6.

Listing 2-6. CSS Code for Translating an Image
img.tilt {
  width: 300px; height: 300px; float: left;
  -moz-transform: translate(50px, -4em); -o-transform: translate(50px, -4em);
  -ms-transform: translate(50px, -4em); -webkit-transform: translate(50px, -4em);
  transform: translate(50px, -4em);
}

SkewTransformation, CSSskew

Applying skew to an element “shears” it horizontally or vertically and can be useful for imparting an extra sense of speed or motion to an element. Imagine taking the opposite sides of a rectangle (the top and bottom edges, for example, or the left and right sides) and pulling them in different directions, while ensuring that they remain parallel.

The values entered for skew refer to the angle that the other sides will be set to. For example, “leaning” an image to the right is a skewX transformation. transform: skewX(21deg) will mean that the left and right edges of the image will be set to 21 degrees from the vertical (see Listing 2-7). Leaning the image to the left still uses skewX, but with a negative value: skewX(−21deg), for example, will set the same edges negative 21 degrees (that is, left) from the vertical. skewY takes the left and right sides of an element’s box and shifts them up and down.

Listing 2-7. CSS Code for Skewing an Image
img.tilt {width: 300px; height: 300px; float: left;-moz-transform: skewX(21deg); -o-transform: skewX(21deg);-ms-transform: skewX(21deg); -webkit-transform: skewX(21deg);transform: skewX(21deg);}

You can see the outcome of Listing 2-7 in Figure 2-7.

Figure 2-7. A rectangular element skewed with CSS

A combination of both horizontal and vertical skew with appropriate values while translating the element in the corresponding directions can provide the impression that the element forms one side of a box, as shown in Listing 2-8.

Listing 2-8. CSS Code to Transform an Image into One Side of an Isometric Box
img.tilt {width: 300px; height: 300px; float: left;-moz-transform: skewY(30deg); -o-transform: skewY(30deg);-ms-transform: skewY(30deg);  -webkit-transform skewY(30deg);transform: skewY(30deg);}

Combining individual transformations together (for example, a rotation and translation) provides much more power to your CSS and gives you many more possibilities for animation.

Combining TransformationsTransformation, CSSmerging

You can merge transformations for an element in one of two ways: as space-separated values of a transform property, or as values for a matrix property.

To merge transformations as space-separated values of a transform property, use the code shown in Listing 2-9.

Listing 2-9. Multiple Transforms in a Single CSS Declaration
img.tilt { width: 300px; height: 300px; float: left;-moz-transform: translate(50px, -4em) rotate(15deg);-webkit-transform: translate(50px, -4em) rotate(15deg);-o-transform: translate(50px, -4em) rotate(15deg);-ms-transform: translate(50px, -4em) rotate(15deg);transform: translate(50px, -4em) rotate(15deg); }

The process for merging transformations as values for a matrix property is significantly more complicated. Matrix transformations are a little beyond the scope of this book; it’s easiest to use a tool to generate the code. The Useragentman Matrix Construction Set and CSS3 Transform Matrix Calculator offer two ways of doing so. An explanation of matrix transformations can be found at The CSS Matrix Transform for the Mathematically Challenged and at the Opera Web Developer site. While they have the advantage of being shorter and more efficient, matrix transforms are not human-readable, so I won’t use them for the examples in this book.

CSS TransitionsTransitions, CSS

CSS Transitions Transitions, CSSdescriptionare exactly that: a transition from one visual state to another, most often initated by some user event, such as a mouseover on an element. Transitions, in other words, are point-to-point. If you need to animate between more than one state and another you will find that CSS Keyframes are better suited for the job. (CSS Keyframes will be discussed in Chapter 5. )

Note that for the examples in this chapter I’ll be using :hover to initiate transitions, but technically any modification to the value of an element’s property will trigger a transition for that property.

Let’s return to the first example and create a simple rotation transition for the image on the page. When the user places their mouse over the image, you want to rotate the element by 7.5 degrees. You’ll do this by adding a :hover pseudo class to the .tilt selector (:hover can be applied to every element, not just links), as shown in Listing 2-10.

Listing 2-10. CSS Transform on Hover, no Transition
<style>img.tilt:hover {-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);transform: rotate(7.5deg);}</style>

The code shown in Listing 2-10 will work, but if you try viewing the page in a browser you’ll see that there’s no animation on mouseover, just an instantaneous flick between one state and the other. You’ll create an animation between these states by using the transition property (see Listing 2-11).

Listing 2-11. Smoothing a CSS Transform by Using a Transition
img.tilt:hover {-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);transform: rotate(7.5deg);-moz-transition: 2s all; -webkit-transition: 2s all;-o-transition: 2s all; transition: 2s all;}

The code shown in Listing 2-11 is far more successful: when you mouse over the image you’ll see that it now rotates smoothly to its new position. The syntax, repeated with multiple vendor prefixes, is easy to understand, too. The element is rotated over two seconds, and all of its properties can be altered during the transition. Note that the order of the values doesn’t matter: you can use 2s all or all 2s.

If you are animating elements over time periods that include fractions of seconds, you can specify the time period as either floating-point values in seconds, or as milliseconds (thousandths of a second), as shown in Listing 2-12.

Listing 2-12. A CSS Transition Measured in Seconds
img.tilt:hover {-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);transform: rotate(7.5deg);-moz-transition: 2.35s all; -webkit-transition: 2.35s all;-o-transition: 2.35s all; transition: 2.35s all;}

This could also be expressed as shown in Listing 2-13.

Listing 2-13. A CSS Transition Measured in Milliseconds
img.tilt:hover {-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);transform: rotate(7.5deg);-moz-transition: 2350ms all;-webkit-transition: 2350ms all; -o-transition: 2350ms all;transition: 2350ms all;}

While animation timingTransitions, CSStiming in milliseconds allows greater precision, the two declarations above achieve the same result—using milliseconds does not create a smoother animation sequence. Very few animations will require accuracy down to one-thousandth of a second, and specifying time in milliseconds usually requires more typing, so I stick with the more familiar seconds format (even for values of less than one second: transition: .35s all, for example). You should use whichever system you feel more comfortable with.

There is just one more improvement to make. You’ll notice that after the element has been rotated, moving your mouse off the image returns it instantaneously to its initial state. While that may be the visual effect you seek for web page elements in some circumstances, in most cases it is better to show the element returning to its initial orientation just as smoothly as it arrived in its rotated state.

The solution is slightly counterintuitive: move the transition portion of the CSS code from the :hover declaration to the default state for the image, keeping only the transform on the :hover declaration (see Listing 2-14).

Listing 2-14. Creating a Smooth Transition to and from a Default State
<style>img.tilt {width: 300px; height: 300px; float: left;-moz-transition: 2s all; -webkit-transition: 2s all;-o-transition: 2s all; transition: 2s all;}img.tilt:hover {-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);transform: rotate(7.5deg);}</style>

The idea is simple: placing the transition property on the class declaration implies that any transition is in effect both from and back to this state. The previous example placed the transition on the :hover declaration, meaning that it was only effective on mouse hover, not during the return to the normal state.

You’ll also notice that the transition can be interrupted if you move your mouse to and from the area of the image; its motion will be reversed smoothly. You can shortcut the code further by only specifying the time for the transition (see Listing 2-15).

Listing 2-15. Timed Rotation in a CSS Transformation
img.tilt {width: 300px; height: 300px; float: left;-moz-transition: 2s;-webkit-transition: 2s; -o-transition: 2s;transition: 2s; }img.tilt:hover {-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);transform: rotate(7.5deg);}

As you’ve seen, creating a smooth and simple animation is easy with CSS3 Transitions. You can modify and animate almost every aspect of an element’s appearance that CSS properties provide access to. The transitions I’ve shown you so far have changed only one aspect of an element at a time, and always in the same fashion. To create richer animations you can combine multiple property transitions for the same element that occur at different times and speeds.

Delaying and Combining Transition EffectsTransitions, CSSdelaying and combining effects

A transition event Transitions, CSSdelaying and combining effectsdescriptioncan be delayed by adding a transition-delay, either as a separate property or appended to the values for transform:


  -moz-transition: 2s 4s;
  -webkit-transition: 2s 4s; -o-transition: 2s 4s; transition: 2s 4s;

Note that the delay takes effect at both the start of the animation and the start of the element’s reversal to its beginning point. The animation will not begin until four seconds after the cursor has been held over the image; once it is fully rotated, the element will stay in place for four seconds before returning to its default orientation. (Also note that the animation will not begin until the mouse has been held over the image for at least four seconds).

You can animate several CSS properties at the same time by adding them to the :hover state (see Listing 2-16).

Listing 2-16. Several CSS Properties Transitioned Simultaneosly
<style>img.tilt {width: 300px; height: 300px; float: left;-moz-transition: 2s;-ms-transition: 2s;-o-transition: 2s;-webkit-transition: 2s;transition: 2s;}img.tilt:hover {-moz-transform: rotate(15deg);-o-transform: rotate(15deg); -ms-transform: rotate(15deg);-webkit-transform: rotate(15deg); transform: rotate(15deg);opacity: .3;}</style>

The propertiesTransitions, CSSdelaying and combining effectsproperties can be given separate timings in the animation by stating transition-duration as a separate property with comma-separated values. Let’s say you wanted to move the image to the right on hover, and fade it out at the same time, but with the fade taking half the time that the movement does (see Listing 2-17).

Listing 2-17.
<style>img.tilt {width: 300px; height: 300px; float: left; position: relative;-moz-transition-property: opacity, left;-o-transition-property: opacity, left;-webkit-transition-property: opacity, left;transition-property: opacity, left;-moz-transition-duration: 2s, 4s;-o-transition-duration: 2s, 4s;-webkit-transition-duration: 2s, 4s;transition-duration: 2s, 4s;}img.tilt:hover {opacity: .2; left: 60px;}</style>

I’ve added position: relative in order to be able to move the element by changing the value of its left, and improved the efficiency of the animation by clearly stating the properties to be animated. (Obviously you don’t have to prefix properties that are well-supported across all browsers, such as opacity.) You’ll notice that the left-to-right animation may not be particularly smooth in some browsers. Let’s change the animated property to translate, as shown in Listing 2-18.

Listing 2-18. A CSS3 Translation Transition
<style>img.tilt {width: 300px; height: 300px; float: left;-moz-transition-property: opacity, translateX;-o-transition-property: opacity, translateX;-webkit-transition-property: opacity, translateX;transition-property: opacity, translateX;-moz-transition-duration: 2s, 4s;-o-transition-duration: 2s, 4s;-webkit-transition-duration: 2s, 4s;transition-duration: 2s, 4s;}img.tilt:hover {opacity: .2;-webkit-transform: translateX(60px);-moz-transform: translateX(60px); -ms-transform: translateX(60px);-o-transform: translateX(60px); transform: translateX(60px);}</style>

You may find that the movement is now smoother; translate is a good alternative for animating the movement of HTML elements via manipulation of absolute or relative positioning.

Introducing Easing FunctionsTransitions, CSSdelaying and combining effectseasing functions

Observe closely the movement of the image on mouseover in the animations you have created so far: there’s something a little special about it (lengthening the time value for the animation may help make this clearer). The motion of the image is not mechanical, but organic: from its default position, the picture speeds up as it rotates, reaches a constant speed for a moment, then slows down before it comes to rest.

In animation, this kind of motion is referred to as ease in/ease out. It is the motion of objects in the everyday world. For example, no car, no matter how powerful, can attain a 0–60 speed record of 0 seconds. Every moving object accelerates to a certain velocity; at the end of its travel (outside of an extreme situation, such as a car crashing into a brick wall at top speed) the object will slow down before coming to a stop.

In CSS3 animation, ease transitions are the default; there’s no need to state that you are using them. If you want to use animation with a more “mechanical” feel to it, you can start by specifying a linear transition (see Listing 2-19).

Listing 2-19. CSS for a Linear Rotation Transition
<style>img.tilt {width: 300px; height: 300px; float: left;-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);transform: rotate(7.5deg);-moz-transition: 2s transform linear;webkit-transition: 2s transform linear; -o-transition: 2s transform linear;transition: 2s transform linear;}</style>

You’ll see that the motion of the image on mouseover is now far more mechanical.

Transition Timing Functions and Bezier CurvesBezier curvesTransitions, CSSdelaying and combining effectstransition timing functions

linear and ease are just two forms of what are referred to as timing functionsBezier curvestiming functions, that is, descriptions of the way in which an object gets from A to B in a straight line. These timing functions may be graphed in a mathematical expression known as Bezier curves.

For example, if you graphed the motion of an element during its transition from 0 to 15 degrees under linear conditions, with time assigned to the horizontal axis and the angle of the image assigned to the vertical, the graph for linear animation would look like Figure 2-8. As time progresses, the angle of rotation increases in lockstep with the passing seconds, creating a constant rate of motion.

Figure 2-8. Graph for linear animationBezier curveslinear animation graph: time on x (horizontal) axis, distance/angle on y (vertical) axis. Note the direct relationship

Removing the linear keyword from the declaration returns the animation to its natural easing state, which when plotted on the same axes would look more like Figure 2-9.

Figure 2-9. Easing timing functionBezier curveseasing timing functionEasing timing function: time on x axis, distance on y axis

As you can see, the angle of rotation changes slowly in the first moments of the eased animation; toward the middle of the transition, the rate of change increases markedly, reaches a “terminal velocity”, then slows down until the sequence reaches its conclusion.

There are several keywords that can be used as a shortcut for common transition motions (see Table 2-2).

Table 2-2. Keyword Alternatives to Common Cubic-Bezier Timing Functions
Keyword Graph Cubic-Bezier Description
linear 0, 0, 1, 1 Instant start and stop; constant velocity through the range of motion.
ease 0.25, 0.1, 0.25, 1 Swift start, accelerating quickly; slow transition to stop at end.
ease-in 0.42, 0, 1, 1 Slow start, acceleration climbing to a sudden stop.
ease-out 0, 0, 0.58, 1 Instant start to animation, motion slows down towards end.
ease-in-out 0.42, 0, 0.58, 1 Element is eased in and out during animation: a slow, smooth start briefly attaining a constant velocity during the middle of the transition before slowing to a stop.

As you can see, all easing curves have a mathematical equivalent in the form of a cubic-bezier expression: a number pair in which each set of floating-point digits describes a point in coordinate space, forming a line that creates a transition curve. (Note that the points at the termination of the curve on either end cannot be moved or defined).

For an ease-in-out curve, the points look like Figure 2-10.

Figure 2-10. Bezier curve for an ease-in-out animation effectBezier curvesease-in-out animation effect

Expressed in CSS, Figure 2-10 looks like this:

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

Understanding the cubic-bezier function allows you to create an almost infinite variety of custom easing curves for your CSS animations. It is even possible to give the points negative values or values greater than 1 to create extreme easing curves, which you can see in Figure 2-11.

Figure 2-11. Bezier curve with negative and greater-than-1 values, creating a “push-pull” animation effectBezier curvespush-pull animation effect

In CSS, Figure 2-11 looks like this:

transition: all 2000ms cubic-bezier(0.280, -0.315, 0.685, 1.390);

The use of such values creates animations with a “spring” or “bounce” to them, also known as push-pull animations. I will explore the uses of such animations in Chapter 4.

Animating in StepsBezier curvesanimation, in steps

It’s also possible to animate an element in steps, rather than as a smooth transition. (Think of the sudden, incremental motion of the second hand on a clock). These are created through the steps function and variants. Here I’ll economize the code by showing just the CSS3 code for standard properties, Firefox and Webkit.

Let’s say that you have an h1 you want to animate on mouseover (see Listing 2-20).

Listing 2-20. Transition Sequence in Steps for a Heading
<style>h1 {font-family: Futura; "Arial Black", Arial, sans-serif;text-align: center;}h1:hover {-moz-transition: 4s all steps(3, end);-webkit-transition: 4s all steps(3, end);transition: 4s all steps(3, end);-moz-transform: translateX(400px);-webkit-transform: translateX(400px);transform: translateX(400px);}</style>

The code in Listing 2-20 will animate all h1 elements in a series of three “jumps” over four seconds after a two-second delay, with no visible motion between each step. Other variations are possible, as shown in Table 2-3.

Table 2-3. Step Values for CSS3 Transitions
Function Graph Description
steps(3) Animation over x number of steps, (steps(3) is illustrated in the graph). Pauses at start. Equivalent to steps(x, end).
steps(3), end Element is still at start, paused at the end.
steps(x), start Instant start to animation, element is paused at the end.

Adding Support for Mobile Devices in CSS3 TransitionsBezier curvesmobile devices support

So far you’ve only activated transforms on :hover. That is by far the most common pseudo-class with which to start a transition, but it is not the only one, as you’ll see in Chapter 3.

:hover can pose two issues for browsers installed on mobile devices:

  • The user’s fingertip may obscure animations, particularly on smaller screens.

  • Some devices do not support :hover (which makes sense as, strictly speaking, all current mobile platforms rely on direct touch). Instead, they cover simple user interaction with :focus.

If you choose to use :hover, you should cover the possibility of :focus-only mobile platforms by using a grouped selector, as shown in the following code:

img.tilt:hover, img.tilt:focus {
  -moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);
  -ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);
  transform: rotate(7.5deg);
  }

Summary

In this chapter you’ve learned the syntax for CSS3 transforms: scale, rotate, skew, and translate, including how to flip images and combine transformations. I also covered the code for the simplest form of animation, CSS3 Transitions, showing you how to create transitions, how to modify their timing and delays, and two common ways to initiate them.

The movement and timing of transitions is most commonly controlled through Bezier curves, although it is also possible to use the steps function and keyword shortcuts.

In the next chapter, we’ll be exploring how to apply these animation techniques to image elements.