CSS Transition

The CSS transitions are effects that are added to change the element gradually from one style to another, without using flash or JavaScript.

You should specify two things to create CSS transition.

• The CSS property on which you want to add an effect.
• The time duration of the effect.

Let's take an example which defines transition effect on width property and duration of 3 seconds.

Note: If you don't specify the duration part, the transition will have no effect because its default value is 0. The transition effect is started when you move cursor over an element.

Note: The transition property is not supported by IE9 and earlier version.

Note: When you take mouse cursor out of the element, it gains its original style gradually.

CSS Multiple Transition Effect

It is used to add transition effect for more than one CSS property. If you want to add transition effect on more than one property, separate those properties with a comma.

Let's take an example. Here, the transition effects on width, height and transformation.