Javatpoint Logo
Javatpoint Logo

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.

Test it Now

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.

Test it Now

Next TopicCSS Tooltips

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA