A curated library of the most famous and useful CSS animations — entrances, exits, attention effects, loaders, scroll-driven reveals, and special effects. Apply with a single class. Customize with CSS variables. Import only what you need.
Part of the Arc ecosystem — a full-stack web language that compiles to zero-dependency HTML, CSS, and JS.
Quick Start • Animation Catalog • Customization • Tree-Shaking • Browser Support • Arc Integration
CDN (no install):
<!-- Full bundle -->
<link rel="stylesheet" href="https://unpkg.com/arc-animations/index.css">
<!-- Or a single category -->
<link rel="stylesheet" href="https://unpkg.com/arc-animations/src/entrances.css">npm:
npm install arc-animations/* Full bundle */
@import "arc-animations";
/* Tree-shaken — only what you need */
@import "arc-animations/src/base.css";
@import "arc-animations/src/attention.css";Apply an animation:
<div class="animate-zoom-in">Hello</div>
<div class="animate-shake">Error!</div>
<div class="skeleton" style="width:200px;height:20px"></div>Elements appearing. These complement Arc's 9 built-in keyframes — no duplication.
| Class | Description |
|---|---|
.animate-zoom-in |
Zooms in from 50% scale |
.animate-zoom-in-up |
Zooms in while rising from below |
.animate-zoom-in-down |
Zooms in while dropping from above |
.animate-zoom-in-left |
Zooms in from the left |
.animate-zoom-in-right |
Zooms in from the right |
.animate-slide-right |
Slides in from the right |
.animate-flip-x |
Flips in around the X axis |
.animate-flip-y |
Flips in around the Y axis |
.animate-blur-in |
Fades in from blur |
.animate-rotate-in |
Spins and scales in |
.animate-bounce-in |
Overshoots then settles |
.animate-back-in-up |
Enters from below with overshoot |
.animate-back-in-down |
Enters from above with overshoot |
.animate-back-in-left |
Enters from left with overshoot |
.animate-back-in-right |
Enters from right with overshoot |
.animate-roll-in |
Rolls in from the left with rotation |
.animate-light-speed-in |
Fast horizontal sweep with skew |
.animate-jack-in-the-box |
Spring pop from below, elastic overshoot |
.animate-float-in |
Gentle drift upward with fade |
Elements disappearing.
| Class | Description |
|---|---|
.animate-zoom-out |
Shrinks to 50% scale |
.animate-zoom-out-up |
Shrinks and rises |
.animate-zoom-out-down |
Shrinks and drops |
.animate-zoom-out-left |
Shrinks and exits left |
.animate-zoom-out-right |
Shrinks and exits right |
.animate-slide-up-out |
Exits upward |
.animate-slide-down-out |
Exits downward |
.animate-slide-left-out |
Exits to the left |
.animate-slide-right-out |
Exits to the right |
.animate-flip-x-out |
Flips out around the X axis |
.animate-flip-y-out |
Flips out around the Y axis |
.animate-blur-out |
Fades out to blur |
.animate-rotate-out |
Spins and shrinks out |
.animate-bounce-out |
Shrinks with a bounce before disappearing |
.animate-back-out-left |
Exits left with pull-back |
.animate-back-out-right |
Exits right with pull-back |
.animate-light-speed-out |
Fast sweep to the right |
.animate-hinge |
Swings on top-left pivot and falls off the page (2s) |
Draw the user's eye to existing elements.
| Class | Description |
|---|---|
.animate-shake |
Rapid horizontal oscillation |
.animate-shakeX |
Horizontal-only shake |
.animate-shakeY |
Vertical-only shake |
.animate-head-shake |
Subtle left-right with Y-axis rotation |
.animate-wobble |
Figure-8 oscillation |
.animate-flash |
Opacity blink |
.animate-heartbeat |
Double-beat scale pulse |
.animate-rubber-band |
Elastic stretch and compress |
.animate-tada |
Scale pop with waggle |
.animate-jello |
Gelatinous shear |
.animate-swing |
Pendulum rotation around top-center |
.animate-float |
Gentle infinite vertical hover (loops) |
.animate-glow |
Pulsing box-shadow — customize via --glow-color (loops) |
.animate-breathe |
Slow scale pulse — for CTAs and live indicators (loops) |
Require specific HTML markup — see HTML Patterns.
| Pattern | Class / Element | Description |
|---|---|---|
| Skeleton shimmer | .skeleton |
Linear-gradient sweep |
| Bouncing dots | .dots > i × 3 |
3-dot staggered bounce |
| Ping / ripple badge | .ping |
Radial ripple for status indicators |
| Indeterminate progress | .progress-bar > .progress-bar__fill |
Sweeping bar |
| Blink cursor | .animate-blink |
Step-function blink |
| Orbit loader | .orbit > .orbit__dot |
Dot tracing a circle (pure CSS) |
| Concentric ripple | .ripple |
Material Design expanding rings |
| Equalizer wave | .wave > i × 5 |
5-bar audio equalizer |
Uses animation-timeline: view() — Chrome 115+, Edge 115+. Falls back via IntersectionObserver pattern.
| Class | Description |
|---|---|
.reveal |
Fade + slide in as element enters viewport |
.fade-in-viewport |
Opacity-only fade on scroll entry |
.parallax-slow |
Element moves at 40% of scroll speed |
.count-up |
Number animates from 0 to data-target on entry (needs 10-line JS — see scroll.css) |
.stagger-children |
Apply to a list parent; children get staggered --anim-delay (up to 8 items) |
Structural patterns — require specific HTML or CSS setup.
| Class | Description |
|---|---|
.animate-glitch |
RGB channel-split text glitch |
.animate-neon |
Flickering neon text glow — customize via --neon-color |
.animate-aurora |
Animated mesh gradient background — customize via --aurora-1/2/3 |
.animate-gradient-shift |
Animated gradient background sweep — customize via --grad-from/mid/to |
.animate-morph |
Clip-path polygon morph — customize via --morph-from/to |
.typewriter |
Text reveals char-by-char — set --chars to character count |
.marquee > .marquee__track |
Horizontal scrolling ticker, pauses on hover |
.flip-card > .flip-card__inner > .flip-card__front + .flip-card__back |
3D card flip on hover |
Every animation reads from CSS custom properties with sensible defaults. Override at any scope:
/* Global defaults */
:root {
--anim-duration: 0.4s;
--anim-easing: cubic-bezier(0.16, 1, 0.3, 1); /* spring-like */
--anim-delay: 0s;
--anim-fill: both;
--anim-iterations: 1;
}
/* Per-element override */
.my-card {
--anim-duration: 0.7s;
--anim-delay: 0.1s;
}
/* Glow color */
.my-button { --glow-color: #6366f1; }
/* Neon color */
.my-logo { --neon-color: #0ff; }
/* Aurora palette */
.my-hero {
--aurora-1: oklch(65% 0.25 290);
--aurora-2: oklch(65% 0.25 160);
--aurora-3: oklch(65% 0.25 20);
}
/* Gradient shift colors */
.my-cta {
--grad-from: oklch(55% 0.2 260);
--grad-mid: oklch(55% 0.2 320);
--grad-to: oklch(55% 0.2 200);
}
/* Morph shapes */
.my-blob {
--morph-from: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
--morph-to: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* Typewriter length */
.my-heading { --chars: 20; }
/* Marquee speed */
.my-ticker { --marquee-duration: 10s; }Import only the categories you use. Each file is fully independent:
/* Only include what you need */
@import "arc-animations/src/base.css"; /* required — CSS vars + a11y reset */
@import "arc-animations/src/entrances.css"; /* 19 entrance animations */
@import "arc-animations/src/exits.css"; /* 18 exit animations */
@import "arc-animations/src/attention.css"; /* 14 attention animations */
@import "arc-animations/src/loading.css"; /* 8 loading patterns */
@import "arc-animations/src/scroll.css"; /* 4 scroll-driven + stagger */
@import "arc-animations/src/effects.css"; /* 8 special effects */| File | Size | Animations |
|---|---|---|
src/base.css |
0.4 KB | CSS vars + a11y reset |
src/entrances.css |
6.2 KB | 19 |
src/exits.css |
5.8 KB | 18 |
src/attention.css |
5.1 KB | 14 |
src/loading.css |
5.0 KB | 8 |
src/scroll.css |
3.2 KB | 4 + stagger |
src/effects.css |
8.0 KB | 8 |
index.css (all) |
34 KB | 71 |
Some animations require specific markup:
<!-- Skeleton shimmer -->
<div class="skeleton" style="width:200px;height:20px;"></div>
<!-- Bouncing dots -->
<span class="dots"><i></i><i></i><i></i></span>
<style>.dots i { background: currentColor; width:8px; height:8px; border-radius:50%; }</style>
<!-- Ping badge -->
<div class="ping" style="width:12px;height:12px;border-radius:50%;background:#22c55e;color:#22c55e"></div>
<!-- Progress bar -->
<div class="progress-bar" style="color:#6366f1">
<div class="progress-bar__fill"></div>
</div>
<!-- Orbit loader -->
<div class="orbit" style="color:#6366f1">
<div class="orbit__dot"></div>
</div>
<!-- Equalizer wave -->
<span class="wave" style="color:#6366f1"><i></i><i></i><i></i><i></i><i></i></span>
<style>.wave i { background:currentColor; display:inline-block; }</style>
<!-- Typewriter (monospace, set --chars to character count) -->
<p class="typewriter" style="--chars:24">Your text here exactly 24 chars</p>
<!-- Marquee (duplicate content for seamless loop) -->
<div class="marquee">
<div class="marquee__track">Item · Item · Item · Item · Item · Item · </div>
</div>
<!-- Flip card -->
<div class="flip-card" style="width:200px;height:120px">
<div class="flip-card__inner">
<div class="flip-card__front">Front side</div>
<div class="flip-card__back">Back side</div>
</div>
</div>
<!-- Count-up (scroll entry triggers JS counting) -->
<span class="count-up" data-target="12500">0</span>
<!-- Requires 10-line JS snippet — see src/scroll.css for the full snippet -->| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
All @keyframes animations |
43+ | 16+ | 9+ | 79+ |
| CSS custom properties | 49+ | 31+ | 9.1+ | 15+ |
animation-timeline: view() (scroll-driven) |
115+ | ✗ | ✗ | 115+ |
clip-path morph |
55+ | 54+ | 13.1+ | 79+ |
backface-visibility (flip-card) |
12+ | 10+ | 4+ | 12+ |
filter: blur() |
18+ | 35+ | 9.1+ | 79+ |
Scroll-driven animations (reveal, fade-in-viewport, parallax-slow) fall back gracefully: the CSS emits an IntersectionObserver-compatible pattern where adding .is-visible triggers the animation on any browser.
src/base.css automatically injects:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}All 71 animations collapse to instant on systems with reduced motion enabled. No per-animation opt-out needed.
arc-animations is designed to complement Arc's 9 built-in keyframes — not replace them. Arc ships fade-in, fade-out, slide-up, slide-down, slide-in, scale-in, bounce, spin, and pulse baked into its CSS emitter with automatic tree-shaking. This library adds the remaining 71 animations that Arc doesn't include.
page "Hero"
design
hero
animate: fade-in 0.4s ease /* Arc's built-in */
<!-- Use arc-animations for everything else -->
<link rel="stylesheet" href="arc-animations/src/entrances.css">
<div class="animate-zoom-in">...</div>See CONTRIBUTING.md. Bug reports and animation requests welcome via GitHub Issues.
MIT. See LICENSE.
Part of the Arc ecosystem. Zero dependencies. Zero JS. Pure CSS.