CSS3 Transitions


I love Flex and ActionScript but I always want to recommend the appropriate technology for the job.  Sometimes that technology is CSS3 and HTML5, which is really exciting to me. So I thought I’d post a simple CSS3 example — on the CSS3 transition property to be specific. It allows property changes in CSS values to occur smoothly over a specified duration.

In this example, when you hover the mouse over the link, the background color will transition from light gray to red and the font color will transition from black to white:

[snippet id=55865]

 

View Example

 

CSS3 Properties Used:

transition-property The property to which we apply the animation Virtually any CSS property: color, background, width, font-size etc.
transition-duration Duration of the animation Time in seconds: 0.5s — half a second, 60s — one minute, etc.
transition-timing-function Temporary function that is used for animation ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay Delay of the animation Time in seconds: 0.5s — half a second, 60s — one minute, etc.