CSS3 Transitions Interaction invitations are important to good user experience design,
11.1 CSS3 Transitions 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:
Download css3transitions/style.css
a.button{ padding: 10px; border: 1px solid #000; text-decoration: none;
} a.button:hover{
background-color: #bbb; color: #fff
} 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 transitions 3 let us do quite a bit more, includ- ing 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:
Download css3transitions/style.css Line 1
a.button{
padding: 10px;
border: 1px solid #000;
text-decoration: none; 5 -webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;
3. http://dev.w3.org/csswg/css3-transitions/
CSS3 T RANSITIONS 220
a.button:hover{
background-color: #bbb;
color: #fff
} 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:
A more complex curve, with points ( (0.0, 0.0), (0.42,0.0), (1.0, 1.0), (1.0,
1.0) ), called an ease-in curve, looks like this:
This time, only the second point has changed, which is what causes the bottom-left part of the line to curve.
W EB W ORKERS 221
Even more complex is the ease-in-out curve, which has a curve at the bottom and at the top, like this:
The points for this curve are ( (0.0, 0.0), (0.42,0.0), (0.58, 1.0), (1.0,
1.0) ). 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 pub-
lic domain script 4 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.