HTML and CSS Reference
In-Depth Information
FIGURE 5.20
A funky
animated bar graph that
demonstrates the different
transition-timing-functions.
steps()
.
Instead of giving a smooth transition throughout, this value causes
the transition to jump between a set number of steps placed equally along
the transition. For example,
steps(10)
would make the transition jump
along in ten steps. You can also set an optional second parameter with a
value of
start
or
end
—for example,
steps(10, start)
or
steps(10, end)
.
This specifies whether the change in property value should happen at the
start or end of each step. You won't find much use for this optional parameter,
but it is worth a mention.
cubic-bezier()
.
You can use
cubic-bezier()
to specify your own cus-
tom cubic Bézier curve to use for the transition. This function takes
four arguments: the X and Y coordinates of the beginning control han-
dle, and the X and Y coordinates of the end control handle. For example,
cubic-bezier(0.25,0.1, 0.25, 1.0)
is equivalent to the
ease
preset value.
To m a ke t h e d i ffe re n c e b e t we e n t h e s e t i m i n g f u n c t i To n s e a s i e r t To a p p re c i at e ,
I've created an animated bar graph example that shows several different bars tran-
sitioning across the screen when the display is hovered over (
Figure 5.20
). Each
one has a different timing function applied, so all will reach the end of their course
at the same time, but their rates will vary. See the transition-timing-functions.html
file in the chapter5 code download folder.
NOTE:
The
steps
timing function doesn't yet appear to
work in Opera, but it should get there soon.
