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:
Similar Reads
CSS Animations CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.Use @keyframes to define the animation steps.Apply animations with properties like animation-name and animation-duration.Control the animation flow using animation-timin
7 min read
Tailwind CSS Animation This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used for animating elements with CSS animation. In CSS, we can do that by using the CSS animation property.Animation classes :animate-spin: This class is used to add a linear spin an
2 min read
CSS Scroll Animation CSS scroll animations are used to make webpages more exciting and engaging to the users by applying animations on scroll. Scroll animations assist in directing the users’ attention, enhance the usability of the site, and bring a sense of depth, without overloading the user. In this article, we will
3 min read
How to make CSS Animations ? Animation is a way using which we can create the illusion of motion by placing still images one after another in a typical format. For example, we can have a ball rising up at some instant then falling down as an animation effect. CSS provides us with some properties to control the animation effect
3 min read
Web API Animations Web API Animations are all about making HTML elements (like buttons, images, and text) and their styles (like colors, sizes, and positions) change over time. Web API animations are tools that help change how things look and move on websites. They make elements like buttons, images, or text shift or
5 min read