CSS Transitions
Transitions interpolate property changes over time. A transition typically specifies the property, duration, timing function, and optional delay.
Transitions work when a property has a different computed value before and after a state change.
CSS Transition
Button Transition
.button {
background: #2563eb;
transition:
background-color 180ms ease,
transform 180ms ease;
}
.button:hover {
background: #1d4ed8;
transform: translateY(-2px);
}💡 The browser interpolates the supported property changes over 180 milliseconds.
Key Takeaways
- Transitions smooth state changes.
- Transition only the properties that need animation.
Knowledge Check
What does a CSS transition primarily do?