Transition Effects

In CSS, you can apply the transition effect on the content of your Web page using various transition properties. These transition properties are listed as follows:

• transition-property: Specifies the property to which you apply the transition
• transition-duration: Specifies the time duration or the length of a transition
• transition-delay: Delays the transition
• transition-timing-function: Changes the speed of transitioning images

The following is an example of using the transition properties:

DIV { transition-property: opacity; transition-duration: 2s; transition-timing-function: ease-in-out; }

In the preceding example, we have applied the transition effect on the opacity property of the DIV element and set the time limit for transition to 2 seconds. The degree of smoothness of the transition effect is defined by the ease-in-out property.

Click here for demos to see transition effects:
demo 1
demo 2