HTML and CSS Reference
In-Depth Information
transition-duration
value in seconds (āsā is the unit), since the default
time a transition takes is 0 seconds. You can add them both in the
transition
shorthand property. You can also specify a delay or a timing
function to more finely tune how the two values switch.
Beyond transitions, full-fledged animations with multiple keyframes are also
possible with CSS3 (but currently only supported in Safari/Chrome). First,
you give the animation a name and define what the animation will do at
di
"
erent points (keyframes, indicated with percentages) through its duration.
Next, you apply this animation to an element using the
animation-name,
animation-duration,
and
animation-interation-count
properties. You could also set a delay and timing function, just like with
transitions.
CSS3 USABILITY / READABILITY ENHANCEMENTS
Most the CSS3 techniques we've gone over so far have been purely
cosmetic e
"
ects that aid progressive enhancement. But CSS3 can also be
used to improve the usability of your pages.
Creating Multiple Columns of Text
Aids in: progressive enhancement, adaptability
Some pieces of text are more readable in narrow, side-by-side columns,
similar to traditional newspaper layout. You can tell the browser to arrange
your text into columns by either defining a width for each column (the
column-width
property) or by defining a number of columns (the
column-count
property). Other new properties let you control gutters/
gaps, rule lines, breaking between columns and spanning across columns.
(For now, you need to use the browser-specific prefixes of
-moz
and
-
webkit
.
) This is another one of those techniques that can harm instead of