W3.CSS Animations
W3.CSS Animation Classes
W3.CSS provides classes for sliding, fading, zooming, and spinning elements.
Animations can be added by applying an animation class directly to an HTML element.
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 provides the following classes for animations:
| Class | Defines |
|---|---|
w3-animate-top | Slides in an element from the top |
w3-animate-bottom | Slides in an element from the bottom |
w3-animate-left | Slides in an element from the left |
w3-animate-right | Slides in an element from the right |
w3-animate-opacity | Animates an element's opacity from 0 to 1 |
w3-animate-zoom | Animates an element from 0 to 100% in size |
w3-animate-fading | Continuously fades an element in and out |
w3-spin | Spins an element 360 degrees |
Animate Top
The w3-animate-top class slides in an element from the top:
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:
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 the left:
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:
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 fades an element in:
Zoom In Elements
The w3-animate-zoom class zooms an element in:
Spin Elements
The w3-spin class spins an element continuously:
Continuous Fading
The w3-animate-fading class continuously fades an element in and out:
Animate Fade In and Out
Different Animations
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 »
