5️⃣

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:

image

Now let's give it a few properties:

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:

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:

image

Source code:

image

Previous Section

Next Section

⚖️

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.