W3.CSS — Animations

Fade Animations

<div class="w3-animate-fade">Fade in animation</div>
<div class="w3-animate-opacity">Opacity animation</div>

Slide Animations

<div class="w3-animate-slide">Slide in animation</div>
<div class="w3-animate-top">Slide from top</div>
<div class="w3-animate-bottom">Slide from bottom</div>

Zoom Animations

<div class="w3-animate-zoom">Zoom animation</div>
<div class="w3-animate-top">Zoom from top</div>

Spinner Animation

<div class="w3-center">
    <div class="w3-spinner w3-text-blue"></div>
    <div class="w3-spinner w3-text-red w3-border w3-round-large" style="width:50px;height:50px"></div>
</div>

Animation Examples

<!-- Fade in on load -->
<div class="w3-animate-fade w3-container">
    <h1>Welcome!</h1>
    <p>This content fades in.</p>
</div>

<!-- Hover animation -->
<div class="w3-card-4 w3-animate-zoom" style="width:300px">
    <div class="w3-container">
        <h4>Hover to zoom</h4>
    </div>
</div>

<!-- Loading spinner -->
<div class="w3-center w3-padding-64">
    <div class="w3-spinner w3-text-blue w3-large"></div>
    <p>Loading...</p>
</div>

Animation Classes

Class	Description
w3-animate-fade	Fade in
w3-animate-opacity	Opacity change
w3-animate-top	Slide from top
w3-animate-bottom	Slide from bottom
w3-animate-left	Slide from left
w3-animate-right	Slide from right
w3-animate-zoom	Zoom effect

Spinner Sizes

<div class="w3-spinner w3-small"></div>
<div class="w3-spinner w3-medium"></div>
<div class="w3-spinner w3-large"></div>
<div class="w3-spinner w3-xlarge"></div>
<div class="w3-spinner w3-xxlarge"></div>

Mini Practice

Create HTML code that:

1. Creates a fade-in animation
2. Adds a loading spinner
3. Uses zoom animation on hover
4. Creates a slide animation

Up Next

Next: Learn about W3.CSS Images.