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

Transition + Transform

Hover over the Blue div element below:

In this example the square is rotating 180 degreese.

In this example the circle contains 4 colors and is rotating 180 degreese and becoming a frame.

In this example the hover effect is expanding both sides, using a easing-function called cubic-bezier

In this example the hover effect is expanding the square fully in 8 steps

Change shape with :hover

Hover over the Square to change the shape to a Circle below:

:Hover + Transition

Hover over the Picture to see what hides behind it