Transitions: property duration timing
Add transition to smoothly animate CSS property changes, pick appropriate durations, and choose easing functions like ease-in-out.
What Is a CSS Transition?
A CSS transition animates a property from one value to another when it changes (on hover, focus, or a class toggle). It's declarative — you tell CSS which properties to transition and how; the browser does the rest.
Basic Syntax
transition: property duration timing-function delay. You can list multiple transitions separated by commas.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeAll lessons in this course
- CSS Custom Properties: declaring and updating
- Transitions: property duration timing
- @keyframes Animations
- Respecting prefers-reduced-motion