Animation

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

Sample 1
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

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

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, dkocho4, MelindaR, MashKao
 Last updated by: chrisdavidmills,