HTML and CSS Reference
In-Depth Information
The
BeerCamp SXSW 2010 site
scales and rotates the sponsor logos on hover.
Animation and Transitions
Aids in: progressive enhancement, e
"
ciency
Animation is now no longer the solely the domain of Flash or JavaScript —
you can now create animation in pure HTML and CSS. Unfortunately, CSS3
animation and transitions do not have very good browser support, but as
with most of the e
"
ects we've talked about so far, they're great for adding a
little non-essential flair.
CSS3 transitions are essentially the simplest type of animation. They
smoothly ease the change between one CSS value to another over a
specified duration of time. They're triggered by changing element states,
such as hovering. They're supported by Safari, Chrome, and Opera 10.5.
To create a transition, all you have to do is specify which elements you want
to apply the transition to and which CSS properties will transition, using the
transition-property
property. You'll also need to add a