For JavaScript and CSS-based animations, easings (the speed of the animation progresses) have a huge role in making them realistic.

Easings.net is a very useful website for understanding and using such easing functions.

Each function is displayed with a line chart where hovering them automatically runs an animation with that curve.

Easings.net

And, we can see how each function can be used with CSS, SCSS and JavaScript (jQuery Easing plugin).

Also, to customize them, there is a custom link for the functions that gets us to another awesome easing-related website: Cubic-Bezier.com (was featured at 3 Tools For Easier CSS3 “Transition Timing Functions” Cubic-Bezier).

WebResourcesDepot Feed