W3CSS Animations

Animations are used to make elements animate. For instance, you might have visited website were when you scroll down a login box appears from left or bottom saying that register yourself for email or for certain offer. That elements basically animates on the screen. W3CSS animations can easily animate any element. Following are some of the most useful W3CSS animation classes:

w3-animate-top
w3-animate-bottom
w3-animate-left
w3-animate-right
w3-animate-opacity
w3-animate-zoom
w3-animate-fading
w3-spin

In this article we shall some of these classes in action.

W3-animate-top

This class animates the element from out of the screen from -300 pixels from the top to 0 pixels. The following example demonstrates w3-animate-top class in action. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h1 class="w3-center w3-animate-top">Animate this from top!</h1>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, you should see some text falling from outside of the top of the screen to the top.

W3-animate-bottom

This class animates the element from bottom -300 pixels to 0 pixels. The following example demonstrates w3-animate-bottom class in action. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h1 class="w3-center w3-animate-bottom w3-red">Animate this from bottom!</h1>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, you should see some text moving from the bottom of the screen to the top.

W3-animate-left

This class animates the element from left -300 pixels to 0 pixels. The following example demonstrates w3-animate-left class in action. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h1 class="w3-center w3-animate-left">Animate this from left!</h1>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, you should see some text moving from the left of the screen to the top middle.

W3-animate-right

This class animates the element from right -300 pixels to 0 pixels. The following example demonstrates w3-animate-right class in action. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h1 class="w3-center w3-animate-right w3-text-red">Animate this from right!</h1>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, you should see some text moving from the right of the screen to the top-middle

<<< W3CSS Layout ClassesW3CSS Bars >>>