Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 185

Transitions
With CSS3, we can add effects to elements that will gradually change from one style to another without JavaScript
or Flash animations. transition-delay determines when the transition effect should start. transition-duration
specifies the length of the transition effect in seconds or milliseconds. transition-property identifies the CSS
property the transition effect is applied for. transition-timing-function specifies the speed curve of the transition
effect. transition is the shorthand property of the four transition properties.
One of the typical transition effects is associated with the event when a user is moving the mouse over an
element (Listing 5-75).

Listing 5-75. Specifying a :hover Effect for div Elements
div:hover {
width: 400px;
}

If there is no duration specified, the transition will have no effect, because the default value is 0 . To specify the
duration, the CSS property to which the transition will be applied must be defined, followed by the transition length
such as transition: width 2s; .
Transition effects can be added to more than one CSS property by separating the properties with a comma
(Listing 5-76).

Listing 5-76. Transition Effects for Width, Height, and Transformation

div {
transition: width 2s, height 2s, transform 2s;
}

■ It is recommended to apply CSS3 rules with caution, because most modules of CSS3 are not standardized yet,
and browser support varies. Web designers should ensure the graceful degradation of user experience on older
browsers that do not support CSS3. While the rounded corners declared by using the CSS3 property border-radius
are not rendered by older browsers, the general layout and styling provide a similar appearance in old browsers as with
modern browsers with CSS3 support. Similarly, if Web Fonts—that are not supported by older browsers—are used on a site,
a common font and at least a generic font family should be declared as a fallback mechanism (see Chapter 9 for details).

Tip

Initial Property Values
All CSS properties have their initial values that are applied when the property values are set neither by cascading nor by
inheritance. The initial value of each property is defined by the CSS specifications. An initial value is one of the allowed
values of the corresponding CSS property. For example, a color declaration (in any of the allowed formats, typically in
hexadecimal notation), transparent , and inherit are all legal values of the background-color property, from which
transparent is the initial value that can be easily overridden by declaring the desired value in your CSS file (Listing 5-77).

Listing 5-77. The Declared Value Overrides the Initial Value Defined by the CSS Specification

body {
background-color: #198c00;
}