Easing Sampler

Hover over each red square to see the animation take effect.

Linear

The square will start and end abruptly. This is the least organic (like what you would see in nature) easing.

Ease

The square will start slowly, go fast, and decelerate slowly. This is the default setting.

Ease-in

The square will start slowly and end abruptly. Think of this one like a boulder rolling down a hill and then hitting something.

Ease-out

The square will start abruptly and end slowly. This is similar to putting the brakes on in a car after it has been travelling for a while.

Ease-in-out

The square will start slowly and end slowly. This is different from 'ease' in that the square travels more slowly in the middle of the animation.

Cubic Bezier

This allows so much customization of how the animation works! My settings were this: cubic-bezier(0.76, 0, 0.24, 1).