The transition property allows us to smoothly animate changes to CSS properties over a specified duration.
selector {
transition: property duration timing-function delay;
}
property: Specify the CSS property you want to transition.
duration: Specifies the duration of the transition in seconds (s) or milliseconds (ms).
timing-function: Specifies the timing function that controls the pace of the transition (e.g., ease, linear, ease-in-out).
delay: Specifies a delay before the transition starts.
.card {
transition: background-color 0.3s ease-in-out;
}
We can specify multiple properties separated by commas if we want them to have different transition settings.
The timing-function property is optional. If omitted, the transition will use the default timing function, which is ease.
The delay property is also optional. If specified, the transition will start after the specified delay.
.card {
transition: background-color 0.3s ease-in-out, color 0.5s linear;
}
.card {
transition: background-color 0.3s ease-in-out 0.2s;
}
Transitions are commonly used to create smooth effects when hovering over elements, changing their state, or animating user interactions.
They provide a simple and effective way to enhance the user experience by adding subtle animations to our web pages.