Hover transitions

transition

Properties to smoothly transition to a new state when the mouse hovers over an element.

transition
transition-delay
transition-duration
transition-property
transition-timing-function

transition

All-in-one transition spec

The transition property is shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.

css, style, transition, transition

transition-delay

Delay the start

Start the hover transition sequence after a short waiting period.

css, style, transition, transition-delay

transition-duration

From start to finish

Specify the amount of time for the hover transition to take, from start to finish.

css, style, transition, transition-duration

transition-property

Declare properties with transition effects

Specify which property of a selector to transition on hover.

css, style, transition, transition-property

transition-timing-function

Easing functions

Adjust the speed of a hover transition when it begins and ends to create smooth acceleration and deceleration effects.

css, style, transition, transition-timing-function