W3.CSS Animations
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
W3.CSS Animations
❮ Previous
Next ❯
W3.CSS Animation Classes
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 1.5 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 |
Animate Top
The w3-animate-top class slides in an element from the top
(from -300px to 0):
Example
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>Try It Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Animate Bottom
The w3-animate-bottom class slides in an element from the
bottom
(from -300px to 0):
Example
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>Try It Yourself »
Animate Left
The w3-animate-left class slides in an element from left (-300px to 0):
Example
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>Try It Yourself »
Animate Right
The w3-animate-right class slides in an element from the
right (-300px to 0):
Example
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>Try It Yourself »
Fade in Elements
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:
Example
<div class="w3-animate-opacity">..</div>Try It Yourself »
Zoom in Elements
The w3-animate-zoom class animates an element from 0 to 100%
in size.
Zoom in an element with the w3-animate-zoom class:
Example
<div class="w3-animate-zoom">..</div>Try It Yourself »
Spin Elements
The w3-spin class spins an element 360 degrees:
Example
<div class="w3-spin">..</div>Try It Yourself »
Fading Infinite
The w3-animate-fading class fades in and out an element every 10 seconds (continuously):
Animate Fade In and Out
Example
<div class="w3-animate-fading">..</div>Try It Yourself »
Fade All
Example
<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">Try It Yourself »
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";
}
❮ Previous
Next ❯