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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class="w3-container w3-center
w3-animate-top">
< 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class="w3-container w3-center
w3-animate-bottom">
< 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 >
< link rel = "stylesheet"
</ head >
< body >
< div class = "w3-container w3-center w3-animate-left" >
< 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 >
< link rel = "stylesheet"
</ head >
< body >
< div class = "w3-container w3-center w3-animate-right" >
< 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class="w3-container w3-center
w3-animate-opacity">
< 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class="w3-container w3-center
w3-animate-zoom">
< 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class="w3-container w3-center
w3-animate-fading">
< 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center w3-spin" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
02 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...