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]
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.|