W3.CSSAnimations
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
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 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 |
Animate Top
Thew3-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 »<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animate Bottom
Thew3-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 »<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animate Left
Thew3-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 »<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animate Right
Thew3-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 »<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Fade in Elements
Thew3-animate-opacity class animates an element's opacity from 0 to 1 in 0.8 seconds.
Fade in an element with thew3-animate-opacity class:
Zoom in Elements
Thew3-animate-zoom class animates an element from 0 to 100% in size.
Zoom in an element with thew3-animate-zoom class:
Spin Elements
Thew3-spin class spins an element 360 degrees:
Fading Infinite
Thew3-animate-fading class fades in and out an element every 10 seconds (continuously):
Animate Fade In and Out
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 »<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">
