User experience designer Donovan Hutchinson has created a series of GIFs illustrating the 12 principles of animation for the web.
Some of these principles are ‘squash and stretch’, ‘anticipation’, ‘arc’, ‘secondary action’ and ‘timing’ of the animation.
Other than coming up with a detailed breakdown of each principle, he has also included the source HTML and CSS for them here.
Head on over here to check out the full article.
See the Pen #1 Squash and stretch - Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.
See the Pen #2 Anticipation - Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.
See the Pen #3 Staging - Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.
See the Pen #7 Arc (example 2) - Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.
See the Pen #8 Secondary Action - Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.
See the Pen #9 Timing - Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.
See the Pen #11 Solid drawing - Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.
See the Pen #12 Appeal - Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.
[via CSS Animation]