Transitions allows you to change property values smoothly, over a given duration.

Shorthand class .{function}-{duration} will affect all the properties.

Transition timing functions
ease linear ease-in ease-out
And transition durations (in ms)
100 200 300 400 500 600 700 800 900


<img src="..." class="hover-rotate-5 ease-600" />


If you want to change a specific property than use .transition-{property} class.

Style Class
transition-property: width; .transition-width
transition-property: height; .transition-height
transition-property: padding; .transition-padding
transition-property: margin; .transition-margin
transition-property: color; .transition-color
transition-property: background-color; .transition-background-color
transition-property: background; .transition-background
transition-property: all; .transition-all


If you want to apply a specific transition duration than use .transition-{duration} class.

Style Class
transition-duration: 100ms; .transition-100
transition-duration: 200ms; .transition-200
transition-duration: 300ms; .transition-300
transition-duration: 400ms; .transition-400
transition-duration: 500ms; .transition-500
transition-duration: 600ms; .transition-600
transition-duration: 700ms; .transition-700
transition-duration: 800ms; .transition-800
transition-duration: 900ms; .transition-900