transition

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

Example

<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.