Animations for websites are fun for everyone; they are fun for creatives to envisage, often an interesting challenge for developers to build and, most of all, fun and engaging for the visitor of the website, wouldn’t you agree?
From a developer’s perspective, the most popular techniques for animation are Flash, CSS3 and Animated Gifs. I love each of these equally due to their different strengths, but I am am not here to compare them (this would be difficult as they are all very different from each other) but rather to explain how they work to achieve their goals.
Flash
Each technique that I'm looking at in this article works slightly differently and can therefore be used to tackle and overcome different challenges. Flash is particularly good at creating smooth animation: by altering frame rates depending on the type of animation, Flash can be used to achieve smoothness and can have huge benefits for creating realistic animation across a number of device types. (I used Flash to give my butterflies a more realistic flight.)
However, as Flash is not supported on all devices, it can be difficult to ensure that your animation runs smoothly on both old and new devices/browsers. You wouldn't want only the latest devices visiting your website to run animations smoothly (or even at at all) otherwise you would be targeting a limited amount of your website traffic. Just think of all the people that might never know about that awesome animation you had integrated with your website, sniffles. Although the Flash method is ultimately the best option to achieve certain animation paths, you might find a lot can be done just as smoothly if not more smoothly with other animation methods.
CSS3
Is an interesting technique, as it allows for improved performance from your animations, by sharing the work between the main CPU (Central Processing Unit) and GPU (Graphics Processing Unit) in your computer's graphics card.
This means your CPU is not drained and your browsers hardware accelerator will run more smoothly. This technique is mostly used for more complex animation including, General layout compositing, CSS3 transitions, CSS3 3D transforms, Canvas Drawing and WebGL 3D Drawing.
For example, using a modern browsers we can use a CSS3 property: transform: translate3d(0, 0, 0); What this then does is provide a very noticeable change in smoothness of the animation. To polish it off we can add: backface-visibility: hidden; perspective: 1000; for an even smoother animation on iPad and similar devices.
Another example of this is when using a high resolution image, that can only be rotated using CSS3. If this is still not functioning correctly, we could tell the browser how to interpret the CSS using the CPU or GPU and could then float smoothly around in space.
GIFs
If you have a small or simple animation, then an animated gif is your go to type of animation. These files are generally quite small and are often used for continuous loop animations with minimal effort. However, there are many limitations for example, you can't start and stop the animation; if the page is still loading the animation effect will return poor animation effect. To regain a little more control , you would usually load it into the DOM (web page). That aside, the gif has created some of the greatest content on the net or have you not seen the dramatic Chipmunk or any cute kitten Gifs?
Final Thoughts...
So there you have it, three of the top techniques for website animation. All of which have their valid place in the animation space, but there will usually only be one method that 'works' to create the smoothest possible animation for your website.
