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:
In this article we shall some of these classes in action.
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>
Open the above page in browser, you should see some text falling from outside of the top of the screen to the top.
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>
Open the above page in browser, you should see some text moving from the bottom of the screen to the top.
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>
Open the above page in browser, you should see some text moving from the left of the screen to the top middle.
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>
Open the above page in browser, you should see some text moving from the right of the screen to the top-middle