Animation

Basics of animation

Pretty much nothing around us moves instantly. Objects have inertia and they accelerate up to some speed, and then decelerate as they come to a complete stop. This inertia based motion is something our minds perceive as natural motion. Abrupt start of a motion, and abrupt ending, is robotic and unnatural to us. We feel there's something wrong with that kind of motion.

This means that any animations we create should feel natural. 

In below example, both of the balls take the same amount of time to go from one end to the other. However, top ball is accelerating from static point, reaches some top speed, and then slowly decelerates as it comes closer to the end. The ball below has a linear motion and instantly reaches top speed, and simply stops when it gets to the end. Observe them carefully one by one and you'll see how the top one feels more natural, and bottom one feels off.

In CSS, the setup for this animation is done like this:

transition-timing-function: ease-in-out;

Animation timing

Timing of animations should also be considered. There are three general categories regarding timing

Small size motion. An element which takes a smaller part of the screen real estate, usually below 20% of the screen. This would be a small popup opening and closing, a thin side panel moving, various dropdowns, and similar. A small motion should have 0.3 second movement time.

transition-duration: 0.3s; 

Medium size motion. An element which takes approximately half the screen. This would be a large popup which covers a substantial part of the screen, larger elements moving left/right, etc. They should move in 0.5 seconds from one extreme to the other.

transition-duration: 0.5s; 

Large size motion. This is usually reserved for elements which move from one edge of the screen to another. There are not many things that move like that, but one common example is an entire page swiping in or out. That page usually starts off-screen, and moves through the entire viewport to replace or cover the currently visible screen. Such motions should complete in 1 second.

transition-duration: 1s;