Open In App

W3.CSS Animations

Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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=
</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" 
        
</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=
</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=
</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=
</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=
</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:



Last Updated : 02 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads