This article needs a technical review. How you can help.
Groundwork
A great way to make more life-like animations is to vary the rate at which object moves. Animation should imitate the world in which we live. So it’s important to ensure that the pace of the movements within your animations closely resemble the movements of real objects.
Positioning / Scaling / Rotating
Motion easing will create a more natural look when applied to positions, rotations, deformations, scales, and etc. This will add acceleration and deceleration to the motion and will make the experience much more playful and delightful.
Sample 1: Object entrance and exit transition
Entrance - CSS3 syntax: cubic-bezier (0.0, 0.0 , 0.0, 1.0)
Exit - CSS3 syntax: cubic-bezier (1.0, 0.0, 1.0, 1.0)
Sample 2 : Object point to point transition
CSS3 syntax: Cubic-bezier (0.25, 0.0, 0.0, 1.0)
Be flexible
Keep in mind that not all objects move the same way. Lighter or smaller objects may move faster because they require less physical strength; conversely, larger or heavier objects need more time to speed up.