Animations

Animation is a CSS technique that causes elements to gradually appear on the website. Judicious use of animation can make a website seem friendlier. For most people, things that appear suddenly in front of us are startling, and possibly dangerous. A dialog box that gradually fades in can provide a smooth, less jarring interface.

Animating elements

To animate any element’s appearance on the page, you simply need to add the class indicating how you want the element to appear. There are several classes for animation.

Directions

You can animate the element from the top or bottom, or from either side. The following classes are used for directional animation:

• w3-animate-top: Slides element down from the top.
• w3-animate-bottom: Slides element up from the bottom.
• w3-animate-left: Slides element from the left side.
• w3-animate-right: Slides element from the right side.

Zooming

The zooming animation gradually increases the element’s size from 0 to 100 percent. The animation occurs over six-tenths of a second. The w3-animate-zoom class attached to the element performs the zooming animation.

Opacity

Opacity is a setting that determines how transparent an element appears on the screen. A setting of 1 is totally opaque. Lower values create a translucent effect on the element. The W3.CSS framework provides two classes to animate the opacity of the element.

Animate opacity

Adding the w3-animate-opacity class causes a fade-in effect, where the element goes from totally translucent (invisible) to opaque in 1.5 seconds. You can use this effect with a modal dialog to gradually bring up the dialog box.

Fading

The w3-animate-fading class creates a fade-in and then fade-out effect on the element, where the opacity will go from 0 to 1 in 1.5 seconds, and then from 1 to 0 again. 

Spinner

The w3-spin class causes the element to rotate 360 degrees and can be used to suggest to a user that a process is running. If you install Font Awesome, there are a few icons that make effective spinners to indicate a process is running. The code snippet below shows a spinning icon.

Code Listing 63

Figure 50 shows the screen (but on a website, the spinner will keep rotating).

Figure 50: Sample spinner

Tip: Spinners are often used during Ajax calls, to show something is happening.  However, be sure that if an error occurs, the spinner is removed. Otherwise, users see the spinner still moving, and complain about performance.

Summary

Animation can improve the general feel of a site, making your pop-up dialog boxes appear smoother, and allowing you to show processing activities. The W3.CSS animation classes make it easy to add animation.

If the animation speed is too fast or slow, you can easily clone the base CSS classes and create a w3-animate-zoom-slowly class, simply by adjusting the number of seconds that the animation takes. If you consider this approach, be sure to create a separate CSS so you won’t lose your changes if you update the W3.CSS framework.