HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
W3.CSS provides the following classes for animations
W3.CSS provides the following classes for animations:
| Class | Defines |
|---|---|
| w3-animate-top | Slides in an element from the top (-300px to 0) |
| w3-animate-bottom | Slides in an element from the bottom (-300px to 0) |
| w3-animate-left | Slides in an element from the left (-300px to 0) |
| w3-animate-right | Slides in an element from the right (-300px to 0) |
| w3-animate-opacity | Animates an element's opacity from 0 to 1 in 0.8 seconds |
| w3-animate-zoom | Animates an element from 0 to 100% in size |
| w3-animate-fading | Animates an element's opacity from 0 to 1 and 1 to 0 (fades in + fade out) |
| w3-spin | Spins an element 360 degrees |
The w3-animate-top class slides in an element from the top (from -300px to 0):
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
The w3-animate-bottom class slides in an element from the bottom (from -300px to 0):
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
The w3-animate-left class slides in an element from left (-300px to 0):
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
The w3-animate-right class slides in an element from the right (-300px to 0):
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
The w3-animate-opacity class animates an element's opacity from 0 to 1 in 0.8 seconds.
Fade in an element with the w3-animate-opacity class:
<div class="w3-animate-opacity">..</div>
The w3-animate-zoom class animates an element from 0 to 100% in size.
Zoom in an element with the w3-animate-zoom class:
<div class="w3-animate-zoom">..</div>
The w3-spin class spins an element 360 degrees:
<div class="w3-spin">..</div>
The w3-animate-fading class fades in and out an element every 10 seconds (continuously):
Animate Fade In and Out
<div class="w3-animate-fading">..</div>
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img
class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">
startAnim("Normal") function startAnim(animName) { var i; var x = document.getElementsByClassName("animTest"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(animName).style.display = "block"; }