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:
Previous Section
6.4 3D TransformationsNext Section
6.6 AnimationsCopyright © 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.