Zero dependencies · ~3 KB total

Class-driven
animations.

Explore a collection of free CSS and JavaScript animations designed to enhance user experience and bring websites to life. These animations are built to help fellow beginner web developers learn, experiment, and improve their front-end development skills.

<div class="animate fade-up delay-2"></div>
scroll
🡠 Home Download Zip
How to use it

Get started in 4 steps

1
Step 01

Include the two files

Drop animation.css in your <head> and animation.js before your closing </body> tag. That is the entire setup.

⚡The JS must load after the DOM. Place it at the bottom of <body>, or add the defer attribute to the script tag.
HTML — your page 
<head>
  <!-- 1. CSS in <head> -->
  <link rel="stylesheet" href="animation.css">
</head>
<body>

  <!-- your content here -->

  <!-- 2. JS before </body> -->
  <script src="animation.js"></script>
</body>
2
Step 02

Add animate to any element

The animate class is required on every element you want to animate. It sets the element to invisible and enables the CSS transition engine. Without it, nothing happens.

💡You can add animate to any tag — div, h1, p, img, section, anything.
HTML
<!-- Correct: has the base class -->
<div class="animate">I will animate</div>

<!-- Wrong: missing base class, will NOT work -->
<div class="fade-up">I will NOT animate</div>
3
Step 03

Pick an animation class

Add one animation class alongside animate to define the motion. Each class sets an initial CSS transform that resolves when the element enters the viewport.

HTML — animation classes
<!-- Fades -->
<div class="animate fade-in">Opacity only</div>
<div class="animate fade-up">Rise from below</div>
<div class="animate fade-left">Enter from right</div>
<div class="animate fade-right">Enter from left</div>

<!-- Slides -->
<div class="animate slide-up">Bold rise</div>
<div class="animate slide-left">Bold enter from right</div>

<!-- Zoom & Bounce -->
<div class="animate zoom-in">Scale from 80%</div>
<div class="animate bounce-in">Spring with overshoot</div>
4
Step 04

Stagger with delay-N

Add a delay-N class (1 through 10) to stagger sibling animations. Each step = 0.1 s. Perfect for cards and grids — gives a cascading waterfall effect with zero extra JavaScript.

✨Apply ascending delays on siblings: delay-1, delay-2, delay-3… The browser handles the rest.
HTML — staggered grid
<div class="grid">
  <div class="animate fade-up delay-1">Card 1</div>
  <div class="animate fade-up delay-2">Card 2</div>
  <div class="animate fade-up delay-3">Card 3</div>
  <div class="animate fade-up delay-4">Card 4</div>
</div>
<!-- delay-1=0.1s  delay-2=0.2s ... delay-10=1.0s -->

LIVE EXAMPLE ↓ (scroll to see)

delay-1 · 0.1s

Card 1

delay-2 · 0.2s

Card 2

delay-3 · 0.3s

Card 3

delay-4 · 0.4s

Card 4

WordPress — functions.php 
function enqueue_animate_system() {
  wp_enqueue_style(
    'animate-css',
    get_template_directory_uri() . '/animation.css'
  );
  wp_enqueue_script(
    'animate-js',
    get_template_directory_uri() . '/animation.js',
    [], false, true  // true = load in footer
  );
}
add_action( 'wp_enqueue_scripts', 'enqueue_animate_system' );
All animations

Every class, in action

── FADE

.fade-in .fade-up .fade-down .fade-left .fade-right
animate fade-up · delay-1

Rises from below

Translates 40px up while fading in. The most versatile animation — use it for almost everything.

animate fade-left · delay-2

Enters from right

Slides in from 40px to the right. Great for sidebar content or right-column items.

animate fade-right · delay-3

Enters from left

Mirror of fade-left. Alternate these on two-column layouts for a converging entrance.

── SLIDE

.slide-in .slide-up .slide-down .slide-left .slide-right
animate slide-left · delay-1

Sweeps from the right

Travels 100px — more dramatic than a fade. Use for hero callouts or featured blocks.

animate slide-right · delay-2

Sweeps from the left

Stagger these two in a two-column layout for a satisfying converging entrance on scroll.

── ZOOM & BOUNCE

.zoom-in .zoom-out .bounce-in .bounce-out
14
Animations
10
Delay steps
0
Dependencies
∞
Reusability
Try it live

Playground

Choose an animation, pick a delay, hit Play — preview it instantly with no page reload.

Animate me
class="animate fade-up"
Reference

All classes at a glance

ClassEffectDurationNotes
animateBase class — required0.65sSets opacity:0, enables transition
fade-inPure opacity fade0.65sNo transform, just opacity
fade-upFade + rise 40px0.65sMost versatile all-rounder
fade-downFade + drop 40px0.65sGood for nav dropdowns
fade-leftFade + enter from right0.65sRight-column elements
fade-rightFade + enter from left0.65sLeft-column elements
slide-inSlides up 100%0.75sStrong entrance, use sparingly
slide-upSlides up 80px0.70sBolder than fade-up
slide-downSlides down 80px0.70sGood for sticky elements
slide-leftSlides in from right 100px0.70sPanel / drawer entrances
slide-rightSlides in from left 100px0.70sMirror of slide-left
zoom-inScales from 80%0.60sSpringy easing, good for CTAs
zoom-outScales from 120%0.60sModal / overlay entrance
bounce-inSprings in with overshoot0.75sFun, playful — use selectively
bounce-outOvershoots from scale 1.30.75sPair with bounce-in on siblings
delay-1…100.1s per step (max 1.0s)—Stack on siblings to stagger

Ready to animate your project?

Two files. Zero config. Works everywhere HTML does.