Interaction invitations are important to good user experience design, and CSS has supported the :hover pseudoclass for some time so that we can do some basic interaction cues on our elements. Here’s some CSS markup that styles a link so it looks like a button:
a . b u t t o n {
p a d d i n g : lOpx;
b o r d e r : lpx s o l i d #000;
t e x t – d e c o r a t i o n : none;
}
a . b u t t o n : h o v e r {
b a c k g r o u n d – c o l o r : #bbb;
c o l o r : # f f f
}
When we place our cursor over the button, the background changes from white to gray, and the text changes from black to white. It’s an instant transition. CSS3 transitions3 let us do quite a bit more, including simple animations that were possible only with JavaScript. For
example, we can make this transition into a cross-fade by adding the following highlighted code to the style definition:
Une l a . b u t t o n{
p a d d i n g : lOpx;
b o r d e r : lpx s o l i d #000;
t e x t – d e c o r a t i o n : none;
– w e b k i t – t r a n s i t i o n – p r o p e r t y : b a c k g r o u n d – c o l o r , c o l o r ;
– w e b k i t – t r a n s i t i o n – d u r a t i o n : I s ;
– w e b k i t – t r a n s i t i o n – t i m i n g – f u n c t i o n : ease-out;
}a . b u t t o n : h o v e r {
b a c k g r o u n d – c o l o r : #bbb;
c o l o r : # f f f
On line 5, we specify what properties get the transition applied. In this case, we’re changing the background and foreground colors. We specify the duration of the animation on line 6, and we specify the transition’s timing function on line 7.
Timing Functions
The transition-timing-function property describes how transitions happen over time in relation to the duration you’ve set. We specify this timing function using a cubic Bezier curve, which is defined by four control points on a graph. Each point has an X value and a Y value, from 0 to 1. The first and last control points are always set to (0.0,0.0) and (1.0,1.0), and the two middle points determine the shape of the curve.
A linear curve has its control points set to the two end points, which creates a straight line at a 45-degree angle. The four points for a linear curve are ( (0.0, 0.0), (0.0,0.0), (1.0, 1.0), (1.0, 1.0) ), and it looks like this:
This time, only the second point has changed, which is what causes the bottom-left part of the line to curve.
Even more complex is the ease-in-out curve, which has a curve at the bottom and at the top, like this:
We can specify these points right in the CSS property, or we can use some predefined ones like we did in our example.
Our choices are default, ease-in, ease-out, ease-in-out, ease-out-in, and cubic-bezier, in which you set the points of the curve yourself.
If you want the rate to be constant, you’d use linear. If you want the animation to start slow and speed up, you’d use ease-in. If you want to learn a little more about making these curves, there’s a great public domain script4 that shows you examples and helps you see the coordinates.
Play around with transitions, but keep in mind that you want your interface to be usable first and pretty second. Don’t build transitions that frustrate the user, such as things that flicker or take too long to animate. You may also want to investigate CSS3 animations,5 another method for changing CSS properties over time.