Explanation: This CSS declaration (transitions) allows you to gradually change fromo one state to another. For example, a hover effect is immediate on a link. With a transition, you can extend the duration of the appearance of the change. This can be very helpful to bring attention to a part of the page. Of course, at the moment, there are browser specific extensions for these properties.
Properties:
- transition-property: for example a background or image
- transition-duration; typically in seconds
- transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
- transition-delay: typically in seconds
Example CSS code:
To simplify matters, the vendor specific prefixes have been removed (such as -webkit and -moz). If you examine the source code in the example file below, you will see a fairly complete list.
a {
transition-property: background;
transition-duration: 1.5s;
transition-timing-function: ease-in-out;
transition-delay: 0.3s;
}
Example pages (view the source code): http://learning-html5.info/CSS3/CSS_TransitionsSimple.html (will work in most modern browsers).
A slightly more complex example (involving a little JavaScript also): http://learning-html5.info/CSS3/CSS_Transitions.html (will also work in most modern browsers).
References:
Loading ...