CSS transitions allow you to change property values smoothly instead of instantly.
They are commonly used for hover effects, button animations, and UI interactions.
Transitions make websites feel modern and professional without using JavaScript.
Here, the color change happens smoothly because of the transition property.
Without transition, the color would change instantly.
Transitions can animate size, position, color, and many other properties.
This example shows a smooth zoom effect on hover.
This is a real-world example of a button hover animation.
Small transitions like this greatly improve user experience.
Main parts of a CSS transition
- Property that will change
- Duration of the effect
- Timing function
- Optional delay
Using transition all applies the animation to every changing property.
For better performance, it is best to target only the needed properties.
Practice task
Create a box and:
- Add a hover color change
- Add a size or movement effect
- Use the transition property
- Test different durations
Next lesson
In the next page, you will learn about transition properties and timing functions.