Animation is all about motion. Everything in nature moves. Web animation attempts to mimic real-world interaction. Animation gives the illusion of motion and when applied correctly, tells the user they have actually done something. Animation adds style, increases usability, informs users, and can make it easier to figure out how to interact with a web app.
We have come a long way from the introduction of the animated gif. Flash was probably the best initial beginning of animation; it showed movement through a timeline. But Flash is too limiting. The timeline metaphor only works well for sequential movement. It has problems with non-sequential movement.
Hover on this
CSS3 made great progress in adding native animation support. Beyond basic :hover and :active features, CSS3 gave us the ability to animate different elements by translating, rotating, scaling and skewing them. It even gave us basic 3D animation. Transitions can be done linearly or with variation, such as ease, ease-in and ease-out. It even provided support for cubic-bezier transitions.
Creating the Animation. The rocket is set on paused until you hover over the image container. The CSS animation and keyframe functions are set to:
Velocity provides much more functionality than pure CSS transitions: It can do complex animations without CSS keyframe limitations. It provides full timeline control and excellent bezier translations. And it offers cross-browser SVG animation support. Neither CSS transitions nor jQuery offer complete support for animating SVG specific properties (i.e., positional and dimensional), but Velocity does.