Tutorials References Menu

W3.CSS Animations








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>
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:

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 »