W3.CSS Animations

CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. W3.CSS provides developers with some good inbuilt animation classes. The list of classes is as follows:

Sr. No.	Class Name	Description
1.	w3-animate-top	The targeted element appears to slide from the top.
2.	w3-animate-bottom	The targeted element appears to slide from the bottom.
3.	w3-animate-left	The targeted element appears to slide from the left.
4.	w3-animate-right	The targeted element appears to slide from the right.
5.	w3-animate-opacity	The targeted element's opacity changes from 0 to 1 in 1.5 seconds.
6.	w3-animate-zoom	The targeted element's size changes from 0 to 100% in 0.6 seconds.
7.	w3-animate-fading	The targeted element's opacity keeps on changing from 0 to 1 and then back to 0.
8.	w3-spin	The targeted element's angle with axis keeps on changing from 0 to 360 degrees.

Example 1: Using w3-animate-top animation in HTML Page.

Output:

👁 Image

Example 2: Using w3-animate-bottom animation in HTML Page.

Output:

👁 Image

Example 3: Using w3-animate-left animation in HTML Page.

Output:

👁 Image

Example 4: Using w3-animate-right animation in HTML Page.

Output:

👁 Image

Example 5: Using w3-animate-opacity animation in HTML Page.

Output:

👁 Image

Example 6: Using w3-animate-zoom animation in HTML Page.

Output:

👁 Image

Example 7: Using w3-animate-fading animation in HTML Page.

Output:

👁 Image

Example 8: Using w3-spin animation in HTML Page.

Output:

👁 Image