transitions

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:

Leave a Reply

Your email address will not be published. Required fields are marked *