https://github.com/arc-language/arc-animations
71 famous CSS animations. Zero JS, zero dependencies, tree-shakeable by category.
https://github.com/arc-language/arc-animations
Last synced: 3 days ago
JSON representation
71 famous CSS animations. Zero JS, zero dependencies, tree-shakeable by category.
- Host: GitHub
- URL: https://github.com/arc-language/arc-animations
- Owner: arc-language
- License: mit
- Created: 2026-05-28T19:06:46.000Z (about 1 month ago)
- Default Branch: master
- Last Pushed: 2026-05-28T19:06:49.000Z (about 1 month ago)
- Last Synced: 2026-05-29T13:26:55.416Z (about 1 month ago)
- Language: CSS
- Size: 31.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# arc-animations
### 71 famous CSS animations. Zero JS. Zero dependencies. Tree-shakeable by category.
[](#animation-catalog)
[](#quick-start)
[](#)
[](LICENSE)
[](#accessibility)
[](https://github.com/arc-language/arc-web)
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](https://github.com/arc-language/arc-web)** ecosystem — a full-stack web language that compiles to zero-dependency HTML, CSS, and JS.
[Quick Start](#quick-start) • [Animation Catalog](#animation-catalog) • [Customization](#customization) • [Tree-Shaking](#tree-shaking) • [Browser Support](#browser-support) • [Arc Integration](#arc-integration)
---
## Quick Start
**CDN (no install):**
```html
```
**npm:**
```bash
npm install arc-animations
```
```css
/* 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:**
```html
Hello
Error!
```
---
## Animation Catalog
### Entrances (19)
Elements appearing. These complement [Arc's 9 built-in keyframes](#arc-integration) — 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](#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:
```css
/* 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:
```css
/* 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:
```html
.dots i { background: currentColor; width:8px; height:8px; border-radius:50%; }
.wave i { background:currentColor; display:inline-block; }
Your text here exactly 24 chars
Item · Item · Item · Item · Item · Item ·
Front side
Back side
0
```
---
## 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:
```css
@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](https://github.com/arc-language/arc-web)'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.
```arc
page "Hero"
design
hero
animate: fade-in 0.4s ease /* Arc's built-in */
```
```html
...
```
---
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md). Bug reports and animation requests welcome via [GitHub Issues](https://github.com/arc-language/arc-animations/issues).
---
## License
MIT. See [LICENSE](LICENSE).
---