W3.CSS Animations

Toggle navigation
TUTORIAL HOME
W3.CSS Animations
❮ Previous Next ❯
Top
Bottom
Left
Right
Fade In
Zoom
Spin
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 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>
»
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>
»
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>
»
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>
»
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>
»
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>
»
Spin Elements
The w3-spin class spins an element 360 degrees:


Example
<div class="w3-spin">..</div>
»
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>
»
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">
»

❮ Previous Next ❯