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.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-top added animation to this division. --> < div class="w3-container w3-center w3-animate-top"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > </ body > </ html > |
Output:
Example 2: Using w3-animate-bottom animation in HTML Page.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-bottom added animation to this division. --> < div class="w3-container w3-center w3-animate-bottom"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > </ body > </ html > |
Output:
Example 3: Using w3-animate-left animation in HTML Page.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-left added animation to this division. --> < div class = "w3-container w3-center w3-animate-left" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > </ body > </ html > |
Output:
Example 4: Using w3-animate-right animation in HTML Page.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-right added animation to this division. --> < div class = "w3-container w3-center w3-animate-right" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > </ body > </ html > |
Output:
Example 5: Using w3-animate-opacity animation in HTML Page.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-opacity added animation to this division. --> < div class="w3-container w3-center w3-animate-opacity"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > </ body > </ html > |
Output:
Example 6: Using w3-animate-zoom animation in HTML Page.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-zoom added animation to this division. --> < div class="w3-container w3-center w3-animate-zoom"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > </ body > </ html > |
Output:
Example 7: Using w3-animate-fading animation in HTML Page.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-fading added animation to this division. --> < div class="w3-container w3-center w3-animate-fading"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > </ body > </ html > |
Output:
Example 8: Using w3-spin animation in HTML Page.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-spin added animation to this division. --> < div class = "w3-container w3-center w3-spin" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > </ body > </ html > |
Output:
Contact Us