CSS transitions allows you to change property values smoothly, over a given duration.

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

Let's specify a div:

Now let's give it a few properties:

The "bluebox" element has also specified a transition effect for the width property, with a duration of 1 second. The transition effect will start when the specified CSS property (width) changes value.

Now, let's specify a new value for the width property when a user mouses over the element:

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.

Change Several Property Values

The following example adds a transition effect for the width, height, and transform property, with a duration of 1 second for the width, 1 second for the height, and 1 second for the transform:

Source code: