CSS transitions become powerful when you control how they behave.
You can decide:
- Which property should animate
- How long the animation lasts
- How fast or slow it feels
- When the animation should start
These controls help you design smooth and professional UI effects.
Transition-property decides what will animate.
Transition-duration decides how long the animation takes.
The timing function controls how the animation speed changes.
Ease makes the animation start slow and end slow.
Here, two transitions are used at the same time.
Background color changes smoothly, and the button moves slightly upward.
Common timing functions
- ease
- linear
- ease-in
- ease-out
- ease-in-out
Ease-in-out makes the animation start slow, go fast in the middle, and end slow.
This feels natural to users.
Practice task
Create an element and:
- Animate at least two properties
- Try different timing functions
- Change the duration
- Compare how each feels
Next lesson
In the next page, you will learn how to build hover effects using transitions.