6.5 Transitions

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:
notion image
Now let's give it a few properties:
notion image
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:
notion image
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:
notion image
Source code:
notion image
Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.