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.
- 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.
Example pages (view the source code): http://learning-html5.info/CSS3/CSS_TransitionsSimple.html (will work in most modern browsers).