W3CSS Animations

Animations are used to make elements animate. For instance, you might have visited website were when you scroll down a login box appears from left or bottom saying that register yourself for email or for certain offer. That elements basically animates on the screen. W3CSS animations can easily animate any element. Following are some of the most useful W3CSS animation classes:

w3-animate-top

w3-animate-bottom

w3-animate-left

w3-animate-right

w3-animate-opacity

w3-animate-zoom

w3-animate-fading

w3-spin

In this article we shall some of these classes in action.

W3-animate-top

This class animates the element from out of the screen from -300 pixels from the top to 0 pixels. The following example demonstrates w3-animate-top class in action. Take a look at it.