Timing functions

The timing function value allows the speed of the transition
to change over time by defining one of six possibilities: ease,
linear, ease-in, ease-out, ease-in-out, and cubic-bezier
(which allows you to define your own timing curve).


If you slept through geometry in high school like I did, don’t
worry. I recommend simply plugging in each of these timing
function values to see how they differ.
For our simple example, the duration of the transition is so
quick (just a mere 0.3 seconds) that it’d be difficult to tell the
difference between the six options. For longer animations, the
timing function you choose becomes more of an important
piece of the puzzle, as there’s time to notice the speed changes
over the length of the animation.
When in doubt, ease (which is also the default value) or
linear should work just fine for short transitions.

DELAYING THE TRANSITION


Going back to our example, transitions can be delayed from
the moment the trigger happens on screen. For example, let’s
say we wanted the background transition to happen half a
second after the link is hovered over. We can do that using the
transition-delay property.
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0.5s;
  }
a.foo:hover {
  background: #690;
  }


SHORTHAND TRANSITIONS



We could simplify the (non-delayed) declaration significantly
by using the transition shorthand property, which is the syn-
tax we’ll be using in the examples later in the book.
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }
Now we have a much more compact rule that accomplishes
the same result.



Shorthand transition with a delay
If we wanted to add back in the half-second delay to the short-
hand version of the transition, we can do that by placing the
duration value at the end of the rule, like this:
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease 0.5s;
  }
a.foo:hover {
  background: #690;
  }
Now sure, all of this wonderful transitioning works just fine
in WebKit browsers, but what about the others?




BUILDING THE FULL TRANSITION STACK
Here’s a revised declaration, adding the –moz- and –o- prefixes
as well as the actual CSS3 transition property. Again, we’re
putting the non-prefixed property last in the stack to ensure
that the final implementation will trump the others as the
property moves from draft to finished status.
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }
With that stack, we’ll be smoothing out that background
color change in current versions of Safari, Chrome, and Opera, as well as future versions of any browser that chooses
to support it