Transitions and Animations 167
transition-property
The first new property, transition-property, specifies which property (or
properties) of an element will be animated (that’s the most number of
times I’ve ever said property in a single sentence). Here’s the syntax:
E { transition-property: keyword; }
An acceptable keyword value is either all or none or a valid CSS prop-
erty. The default value is all, which means every valid property will be
animated. I stress valid CSS property because not every property can be
transitioned; the specification has a full list of the ones that can at http ://
http://www.w3.org/TR/css3-transitions/#properties-from-css-/.
Here’s an example of transition-property:
h1 {
font-size: 150%;
transition-property: font-size;
}
This code sets an initial value of 150% on the font-size property and
declares this is the property that will be transitioned when the (not yet spec-
ified) trigger is activated. Note that I will add properties to this example
throughout the rest of this section before showing the completed example
in action in “The Complete Transition Example” on page 173.
transition-duration
The next property is transition-duration, which defines the length of time
that the transition takes to complete. Here’s the syntax:
E { transition-duration: time; }
The time value is a number with a unit of ms (milliseconds) or s (seconds).
Because 1000 milliseconds equals 1 second, a value of 1.25s is the same
as 1250ms. The default value is 0 (zero), meaning this property is the only
one required to create a transition. A transition can occur if you declare a
transition-duration without a transition-property (as that defaults to all, so
all valid properties will animate) but not vice versa.
To make the example transition from the previous section happen over
a period of two seconds, you add this code:
h1 {
font-size: 150%;
transition-property: font-size;
transition-duration: 2s;
}
Although you can supply negative values to this property, they will be
interpreted as the default 0.
