CSS3 Transition Property Basics
While browsing some sites, we can see an interesting effect on some links. Most of the time, when you hover over a link, something changes in its style: it will either change its color or background, or will become underlined.
What about this cool effect that consists in gradual transition from one style to another that you can see in the example below:
Hover Over Me!
This transition is achieved by using the CSS3 transition property - property which is supported in all major browsers such as Chrome, Firefox, Opera, Safari (for Safari we will need the -webkit- prefix to get this effect). The CSS3 Transition Syntax
The syntax of the transition supports four values:
the property affected by the transition, such as color, border, background, width, etc. the duration of this transition in seconds, i.e. how long will it take to change your style completely the delay time for the transition to be executed, also in seconds, i.e. how long it takes for the transition to start when the mouse hovers…