CSS Animations give your site and/or brand a unique touch, provide more accessibility, help create affordance (the perception about how an element inside the design is to be used), and can provide the user with a better experience. All this happens when animations are designed and used the right way.
Subtle animations in a web site, point the user to certain tasks to be accomplished, like clicking a call-to-action link or filling out a form. Other animations, like a loading icon inside a button, make the user understand what they need to do, like wait while the next page loads.
This tutorial will explain the concept of animations with a simple example. Let’s start!