Transitions
Also appearing on all the latest versions of the major browsers (including Internet Explorer 10, but not lower versions) is a dynamic new feature called transitions. These specify an animation effect that you want to occur when an element is transformed, and the browser will automatically take care of all the in-between frames for you.
There are four properties you should supply in order to set up a transition, as follows:
transition-property :property; transition-duration :time; transition-delay :time; transition-timing-function:type;
Note
You must preface these properties with the relevant browser prefixes for Mozilla, WebKit, Opera, and Microsoft browsers.
Properties to Transition
Transitions have properties such as height, border-color, and so on. Specify the
properties you want to change in the CSS property named transition-property (here the word “property”
is used by different tools to mean different things). You can include
multiple properties by separating them with commas, like this:
transition-property:width, height, opacity;
Or, if you want absolutely everything about an element to
transition (including colors), use the value all, like this:
transition-property:all;
Transition Duration
The transition-duration
property requires a value of zero seconds or greater. The following
declaration specifies that the transition should take 1.25 seconds to
complete:
transition-duration:1.25s;
Transition Delay
If the transition-delay
property is given a value greater than zero seconds (the default), it
introduces a delay between the initial display of the element and the
beginning of the transition. The following starts the transition after a
0.1-second delay:
transition-delay:0.1s;
If the transition-delay
property is given a value of less than zero seconds (in other words, a
negative value), the transition will execute the moment the property is
changed, but will appear to have begun execution at the specified
offset, so it is partway through its cycle.
Transition Timing
The transition-timing-function
property requires one of the following values:
Using any of the values with the word ease ensures that the transition looks extra
fluid and natural, unlike a linear transition that somehow seems more
mechanical. And if these aren’t sufficiently varied for you, you can
also create your own transitions using the cubic-bezier function.
For example, the following are the declarations used to create the preceding five transition types, illustrating how you can easily create your own:
transition-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1); transition-timing-function:cubic-bezier(0, 0, 1, 1); transition-timing-function:cubic-bezier(0.42, 0, 1, 1); transition-timing-function:cubic-bezier(0, 0, 0.58, 1); transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1);
Shorthand Syntax
You may find it easier to use the shorthand version of this property and include all the values in a single declaration like the following, which will transition all properties in a linear fashion, over a period of .3 seconds, after an initial (optional) delay of .2 seconds:
transition:all .3s linear .2s;
Doing so will save you the trouble of entering many very similar declarations, particularly if you are supporting all the major browser prefixes.
Example 19-4 illustrates how
you might use transitions and transformations together. The CSS creates
a square, orange element with some text in it, and a hover pseudoclass specifying that when the
mouse pointer passes over the object it should rotate by 180 degrees and
change from orange to yellow (see Figure 19-13).
<!DOCTYPE html>
<html>
<head>
<title>CSS Rotate Example</title>
<style>
#square {
position :absolute;
top :50px;
left :50px;
width :100px;
height :100px;
padding :2px;
text-align :center;
border-width :1px;
border-style :solid;
background :orange;
transition :all .8s ease-in-out;
-moz-transition :all .8s ease-in-out;
-webkit-transition:all .8s ease-in-out;
-o-transition :all .8s ease-in-out;
-ms-transition :all .8s ease-in-out; }
#square:hover {
background :yellow;
-moz-transform :rotate(180deg);
-webkit-transform :rotate(180deg);
-o-transform :rotate(180deg);
-ms-transform :rotate(180deg);
transform :rotate(180deg); }
</style>
</head>
<body>
<div id='square'>
Square shape<br />
created using<br />
a simple div<br />
element with<br />
a 1px border
</div>
</body>
</html>
The sample code caters to all the different browsers by providing browser-specific versions of the declarations. On all the latest browsers (including IE10 or higher) the object will rotate clockwise when hovered over, while slowly changing from orange to yellow.
CSS transitions are smart in that when they are canceled they smoothly return to their original value. So if you move the mouse away before the transition has completed, it will instantly reverse and start transitioning back to its initial state.
You should now have a very good idea of what CSS has to offer you, and how to get it to achieve the effects you desire. In the following chapter, we’ll take CSS one step further by interacting dynamically with DOM properties using JavaScript.