These principles form the basis of all animation work. They’re relevant for a number of different fields. The most obvious use is for animating a character design, but these rules are also an invaluable guide in web design – for example, if you want to introduce motion into your interface with some CSS animation.
Squash and stretch
When applied, it gives an object/character a feeling of gravity, weight, mass and flexibility.
Anticipation
When applied, It gives the viewer a more realistic feel to an object.
Staging
When applied, it draws attention to the important part of the scene.
Straight ahead action and pose to pose
When applied, It gives an object a more fluent transformation by changing the shape from frame to frame.
Follow through and overlapping action
When applied, different parts of the object comes to a standstill at different rates.
Slow in and slow out
When applied, the object takes longer to accelerate and stop so it moves at different speeds.
Arc
When applied, objects move in a smooth arc motion with gravity.
Secondary action
When applied, there is a secondary object that supports the main object and helps keep dimensions to the shape.
Timing
When applied, it uses physics to match the natural world such as timing.
Exaggeration
When applied, it makes an animation less realistic and makes the animation interesting.
Solid drawing
When applied, it means having constant drawings throughout the animation.
Appeal
When applied, the animation needs to appeal to the viewer.
Daniel Porter 