Pro CSS3 Animation

CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS

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 timing 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.

■ Note if you’ve animated with JavaScript, note the difference here: CSS3 can use floating-point values in

seconds or milliseconds for timing animations. JavaScript uses milliseconds exclusively, although many JavaScript

frameworks used to create animations can use time intervals measured in seconds.