Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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

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 »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.