Getting Fancy - Jump Start CSS - page 133

transition-property
This is where we identify the property we want to transition. In our example, we've
defined the value as “ color, ” meaning it will transition the color property. This value
can also be “ all, ” which means all properties that have a changed state (for example,
via :hover ) will transition.
transition-duration
This is the amount of time we want to occur while the property is changing from one
value to another. It can be defined in seconds (as in our example) or milliseconds (e.g.
400ms).
transition-timing-function
This defines how the transition will proceed over the course of its duration, or, to put
it another way, it defines the style, or manner, of the transition. This property can take
a number of predefined keyword values, such as linear, ease-in, ease-out, and so on. It
also accepts function values, which are a bit complex, so they are beyond the scope of
this topic. In most cases you won't need anything more than the simple, predefined func-
tions.
transition-delay
This property defines how much of a delay should take place before the transition oc-
curs—again defined in seconds or milliseconds. In our example, we did not include a
value for transition-delay, so it just defaulted to a 0s delay, or no delay.
Looking back at the code we used to write our transition, now that we know all the longhand
properties that make it up, we can alternatively write it like this:
nav a {
color: #fefefe;
transition-property: color;
transition-duration: .4s;
transition-timing-function: ease-out;
transition-delay: 0s;
}