W3.CSS Animations
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 »
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:
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:
Spin Elements
The w3-spin class spins an element 360 degrees:
Fading Infinite
The w3-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 »
