How to create a Smooth Transition on hover using CSS ?
Last Updated :
16 Feb, 2024
Creating a smooth transition on hover in CSS involves using the transition
property to define the property being animated and the duration of the transition. This effect is commonly used to make changes to an element’s appearance smooth and visually appealing when a user hovers over it.
Syntax:
/* Example of creating a smooth transition on hover */
.element {
transition: [property] [duration] [timing-function] [delay];
}
.element:hover {
/* Styles to apply on hover */
[property]: [new-value];
}
Features:
The transition
Property:
- Specifies the property to transition.
- Defines the duration (e.g.,
0.3s
for 0.3 seconds).
- Specifies the timing function (e.g.,
ease
for a smooth acceleration-deceleration effect).
- Optionally, sets a delay before the transition starts.
The :hover
Pseudo-class:
- Defines styles to apply when the element is hovered.
Share your thoughts in the comments
Please Login to comment...