arc-animations

71 famous CSS animations. Zero JS. Zero dependencies. Tree-shakeable by category.

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

Quick Start

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>

Animation Catalog

Entrances (19)

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 |

Exits (18)

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

Attention & Emphasis (14)

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

Loading & Progress (8)

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 |

Scroll-Driven (4 + stagger)

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

Effects (8)

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 |

Customization

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

Tree-Shaking

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 |

HTML Patterns

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 · &nbsp;&nbsp;&nbsp;&nbsp; Item · Item · Item · &nbsp;&nbsp;&nbsp;&nbsp;</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 -->

Browser Support

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

Accessibility

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 Integration

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>

Contributing

See CONTRIBUTING.md. Bug reports and animation requests welcome via GitHub Issues.

License

MIT. See LICENSE.