Bringing Your Website to Life with Transitions and Animations - CSS3 Foundations - page 226

Although you've now achieved the transition on the banner, you can use a few more properties to have even more
control over the effect. The transition-timing-function property describes how the intermediate values
used during a transition are calculated—in other words, how the bit between the start and end acts.
The initial value for transition-timing-function is ease , and there are a lot of other keyword values you
can use with it, too:
• ease —This timing function starts gently (not quite slow), speeds up in the intermediate, and then ends
slow.
• linear —Start, intermediate, and end are all at the same constant speed.
• ease-in — This timing function starts slow, speeds up in the intermediate, and continues until end.
• ease-out —Start and intermediate are the same speed, then it slows down at the end.
• ease-in-out — This timing function starts slow, speeds up in the intermediate. and slows down at the
end.
• step-start — This timing function jumps immediately to the end and stays there.
• step-end — This timing function stays in its start state until the end and then jumps immediately to the
end state.
There are also some advanced functions you can use to really have complete control over the transition: steps()
and cubic-bezier() .
These functions aren't covered in CSS3 Foundations because they are a little too advanced, but if you
want to know more, visit www.w3.org/TR/css3-transitions/#transition-timing-function-
property . If you want to experiment with cubic-bezier() , which essentially allows you to create the
keyword values and everything in between, I recommend visiting http://cubic-bezier.com/ , which allows
you to easily create your own timing functions.
transition-delay
Initial value: 0s | Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 4+, Chrome 1+, Opera 11.6+, Safari 3+
The final transition property is transition-delay , which allows you to specify a delay that occurs prior
to the transition starting. Its initial value of 0s means a transition will start immediately. A transition-delay
of 1s , for example, causes the browser to wait one second prior to starting a transition. As with transition-
duration , if you would like to use an amount less than one second, you can place a decimal point before the value
to specify milliseconds.
With transition-delay, you also are able to specify a negative value. Assuming you give the banner a
transition-delay of -.5s , the transition does not occur for half a second and then appears to begin partway
through—from half a second onward.