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.
Enter CSS and JavaScript animation. Only a few years ago was the first draft of the CSS animation spec released. Then JavaScript libraries were introduced and animations began to be applied to SVG files.
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:
There are two awesome JavaScript utilities to create great animation. Greensock is probably the best, but it requires an annual license. So I prefer to use Velocity.js.
Velocity is a very fast animation engine. It uses native JavaScript and is up to 20 times faster than using jQuery's $.animate() facility. Partly because of its physics-based animation loader, Velocity can be as fast and even faster than CSS (which isn't the case with jQuery).
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.
© 2008-2020 copyright mark calkins