By web animation, we mean a fun, fascinating or moving element, play, music, sound, talk, clip, anything that breaks the linearity of textual content. Designers often use animations to have content components appear in turn for a better understanding of the content. Animations also have the power of interacting with the visitor.
What to consider?
First question: Do we need an animation? Will it help achieving our goals? If we reply Yes, the second question is : What is the best technology to create the animation? and What support can we expect from browsers?
How to decide the interest of using an animation? Considering the adequacy of the means we intend to use with our web targets. In other words, the animation will provide, or not, a suitable object in our web context. Where is expected to go the user's primary focus? This consideration decides the benefits and limits or drawbacks of an animated content.
Animations are better fit for
- Training purpose,
- Exhibition-like presentations,
- Highlighting the message,
- Clarifying the content,
In such contexts, an animation can efficiently represent the user's primary focus targeted. Thus, it becomes effective.
Looking at "user's interaction", the visitor typically has limited ways to interact with an animation. The interaction might bring incomplete results, as usually it does not lead to getting in touch with the website's team.
Means and methods
From the first DHTML trials to CSS3, we now have a wealth of possibilities, all incredibly powerful. To enter more in-depth in each method, see the commented resources We discuss the most effective technology for animation and their respective support by browsers.
CSS animations are the coming trend. The only limit to developers' imagination is the possible lack of support of some browser's versions.
Even server-side programs are an option.
The website caniuse.com gathered focused information covering browser support for CSS HTML5 and SVG. The data organisation allows comparing them; search by browser version or by animation property. A great job! With or without detailed user's statistics for a website, this tool makes it easier to decide which mean and method to use. The website W3 Schools offers a synthetic table about browser support for CSS3 animations
Seduction, fun, questioning. All of us like to play with an animation, to build or use one. There is a penalty, however: animations can be distracting.
Download this page as a quick strategy guide (click Download to save as PDF file)Download
We gathered some excellent columns on the matter; click each link to see our comments and details on each source. You will be able to download the sources' list and comments through a link at the bottom of the page: