{"id":51317576,"url":"https://github.com/arc-language/arc-animations","last_synced_at":"2026-07-01T09:01:14.332Z","repository":{"id":361170107,"uuid":"1252681669","full_name":"arc-language/arc-animations","owner":"arc-language","description":"71 famous CSS animations. Zero JS, zero dependencies, tree-shakeable by category.","archived":false,"fork":false,"pushed_at":"2026-05-28T19:06:49.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-29T13:26:55.416Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arc-language.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-28T19:06:46.000Z","updated_at":"2026-05-28T19:06:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/arc-language/arc-animations","commit_stats":null,"previous_names":["arc-language/arc-animations"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/arc-language/arc-animations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arc-language","download_url":"https://codeload.github.com/arc-language/arc-animations/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arc-language%2Farc-animations/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34999792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-01T02:00:05.325Z","response_time":130,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-01T09:01:13.288Z","updated_at":"2026-07-01T09:01:14.309Z","avatar_url":"https://github.com/arc-language.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# arc-animations\n\n### 71 famous CSS animations. Zero JS. Zero dependencies. Tree-shakeable by category.\n\n\u003cbr\u003e\n\n[![Animations](https://img.shields.io/badge/animations-71-brightgreen?style=flat-square)](#animation-catalog)\n[![Size](https://img.shields.io/badge/size-34%20KB-blue?style=flat-square)](#quick-start)\n[![Dependencies](https://img.shields.io/badge/dependencies-0-success?style=flat-square)](#)\n[![License](https://img.shields.io/badge/license-MIT-blue?style=flat-square)](LICENSE)\n[![prefers-reduced-motion](https://img.shields.io/badge/a11y-prefers--reduced--motion-blueviolet?style=flat-square)](#accessibility)\n[![Part of Arc](https://img.shields.io/badge/part%20of-Arc-black?style=flat-square)](https://github.com/arc-language/arc-web)\n\n\u003cbr\u003e\n\nA 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.\n\nPart 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.\n\n[Quick Start](#quick-start) • [Animation Catalog](#animation-catalog) • [Customization](#customization) • [Tree-Shaking](#tree-shaking) • [Browser Support](#browser-support) • [Arc Integration](#arc-integration)\n\n\u003c/div\u003e\n\n---\n\n## Quick Start\n\n**CDN (no install):**\n```html\n\u003c!-- Full bundle --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/arc-animations/index.css\"\u003e\n\n\u003c!-- Or a single category --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/arc-animations/src/entrances.css\"\u003e\n```\n\n**npm:**\n```bash\nnpm install arc-animations\n```\n```css\n/* Full bundle */\n@import \"arc-animations\";\n\n/* Tree-shaken — only what you need */\n@import \"arc-animations/src/base.css\";\n@import \"arc-animations/src/attention.css\";\n```\n\n**Apply an animation:**\n```html\n\u003cdiv class=\"animate-zoom-in\"\u003eHello\u003c/div\u003e\n\u003cdiv class=\"animate-shake\"\u003eError!\u003c/div\u003e\n\u003cdiv class=\"skeleton\" style=\"width:200px;height:20px\"\u003e\u003c/div\u003e\n```\n\n---\n\n## Animation Catalog\n\n### Entrances (19)\nElements appearing. These complement [Arc's 9 built-in keyframes](#arc-integration) — no duplication.\n\n| Class | Description |\n|-------|-------------|\n| `.animate-zoom-in` | Zooms in from 50% scale |\n| `.animate-zoom-in-up` | Zooms in while rising from below |\n| `.animate-zoom-in-down` | Zooms in while dropping from above |\n| `.animate-zoom-in-left` | Zooms in from the left |\n| `.animate-zoom-in-right` | Zooms in from the right |\n| `.animate-slide-right` | Slides in from the right |\n| `.animate-flip-x` | Flips in around the X axis |\n| `.animate-flip-y` | Flips in around the Y axis |\n| `.animate-blur-in` | Fades in from blur |\n| `.animate-rotate-in` | Spins and scales in |\n| `.animate-bounce-in` | Overshoots then settles |\n| `.animate-back-in-up` | Enters from below with overshoot |\n| `.animate-back-in-down` | Enters from above with overshoot |\n| `.animate-back-in-left` | Enters from left with overshoot |\n| `.animate-back-in-right` | Enters from right with overshoot |\n| `.animate-roll-in` | Rolls in from the left with rotation |\n| `.animate-light-speed-in` | Fast horizontal sweep with skew |\n| `.animate-jack-in-the-box` | Spring pop from below, elastic overshoot |\n| `.animate-float-in` | Gentle drift upward with fade |\n\n### Exits (18)\nElements disappearing.\n\n| Class | Description |\n|-------|-------------|\n| `.animate-zoom-out` | Shrinks to 50% scale |\n| `.animate-zoom-out-up` | Shrinks and rises |\n| `.animate-zoom-out-down` | Shrinks and drops |\n| `.animate-zoom-out-left` | Shrinks and exits left |\n| `.animate-zoom-out-right` | Shrinks and exits right |\n| `.animate-slide-up-out` | Exits upward |\n| `.animate-slide-down-out` | Exits downward |\n| `.animate-slide-left-out` | Exits to the left |\n| `.animate-slide-right-out` | Exits to the right |\n| `.animate-flip-x-out` | Flips out around the X axis |\n| `.animate-flip-y-out` | Flips out around the Y axis |\n| `.animate-blur-out` | Fades out to blur |\n| `.animate-rotate-out` | Spins and shrinks out |\n| `.animate-bounce-out` | Shrinks with a bounce before disappearing |\n| `.animate-back-out-left` | Exits left with pull-back |\n| `.animate-back-out-right` | Exits right with pull-back |\n| `.animate-light-speed-out` | Fast sweep to the right |\n| `.animate-hinge` | Swings on top-left pivot and falls off the page (2s) |\n\n### Attention \u0026 Emphasis (14)\nDraw the user's eye to existing elements.\n\n| Class | Description |\n|-------|-------------|\n| `.animate-shake` | Rapid horizontal oscillation |\n| `.animate-shakeX` | Horizontal-only shake |\n| `.animate-shakeY` | Vertical-only shake |\n| `.animate-head-shake` | Subtle left-right with Y-axis rotation |\n| `.animate-wobble` | Figure-8 oscillation |\n| `.animate-flash` | Opacity blink |\n| `.animate-heartbeat` | Double-beat scale pulse |\n| `.animate-rubber-band` | Elastic stretch and compress |\n| `.animate-tada` | Scale pop with waggle |\n| `.animate-jello` | Gelatinous shear |\n| `.animate-swing` | Pendulum rotation around top-center |\n| `.animate-float` | Gentle infinite vertical hover (loops) |\n| `.animate-glow` | Pulsing box-shadow — customize via `--glow-color` (loops) |\n| `.animate-breathe` | Slow scale pulse — for CTAs and live indicators (loops) |\n\n### Loading \u0026 Progress (8)\nRequire specific HTML markup — see [HTML Patterns](#html-patterns).\n\n| Pattern | Class / Element | Description |\n|---------|-----------------|-------------|\n| Skeleton shimmer | `.skeleton` | Linear-gradient sweep |\n| Bouncing dots | `.dots \u003e i × 3` | 3-dot staggered bounce |\n| Ping / ripple badge | `.ping` | Radial ripple for status indicators |\n| Indeterminate progress | `.progress-bar \u003e .progress-bar__fill` | Sweeping bar |\n| Blink cursor | `.animate-blink` | Step-function blink |\n| Orbit loader | `.orbit \u003e .orbit__dot` | Dot tracing a circle (pure CSS) |\n| Concentric ripple | `.ripple` | Material Design expanding rings |\n| Equalizer wave | `.wave \u003e i × 5` | 5-bar audio equalizer |\n\n### Scroll-Driven (4 + stagger)\nUses `animation-timeline: view()` — Chrome 115+, Edge 115+. Falls back via IntersectionObserver pattern.\n\n| Class | Description |\n|-------|-------------|\n| `.reveal` | Fade + slide in as element enters viewport |\n| `.fade-in-viewport` | Opacity-only fade on scroll entry |\n| `.parallax-slow` | Element moves at 40% of scroll speed |\n| `.count-up` | Number animates from 0 to `data-target` on entry (needs 10-line JS — see scroll.css) |\n| `.stagger-children` | Apply to a list parent; children get staggered `--anim-delay` (up to 8 items) |\n\n### Effects (8)\nStructural patterns — require specific HTML or CSS setup.\n\n| Class | Description |\n|-------|-------------|\n| `.animate-glitch` | RGB channel-split text glitch |\n| `.animate-neon` | Flickering neon text glow — customize via `--neon-color` |\n| `.animate-aurora` | Animated mesh gradient background — customize via `--aurora-1/2/3` |\n| `.animate-gradient-shift` | Animated gradient background sweep — customize via `--grad-from/mid/to` |\n| `.animate-morph` | Clip-path polygon morph — customize via `--morph-from/to` |\n| `.typewriter` | Text reveals char-by-char — set `--chars` to character count |\n| `.marquee \u003e .marquee__track` | Horizontal scrolling ticker, pauses on hover |\n| `.flip-card \u003e .flip-card__inner \u003e .flip-card__front + .flip-card__back` | 3D card flip on hover |\n\n---\n\n## Customization\n\nEvery animation reads from CSS custom properties with sensible defaults. Override at any scope:\n\n```css\n/* Global defaults */\n:root {\n  --anim-duration:   0.4s;\n  --anim-easing:     cubic-bezier(0.16, 1, 0.3, 1);  /* spring-like */\n  --anim-delay:      0s;\n  --anim-fill:       both;\n  --anim-iterations: 1;\n}\n\n/* Per-element override */\n.my-card {\n  --anim-duration: 0.7s;\n  --anim-delay:    0.1s;\n}\n\n/* Glow color */\n.my-button { --glow-color: #6366f1; }\n\n/* Neon color */\n.my-logo   { --neon-color: #0ff; }\n\n/* Aurora palette */\n.my-hero   {\n  --aurora-1: oklch(65% 0.25 290);\n  --aurora-2: oklch(65% 0.25 160);\n  --aurora-3: oklch(65% 0.25 20);\n}\n\n/* Gradient shift colors */\n.my-cta    {\n  --grad-from: oklch(55% 0.2 260);\n  --grad-mid:  oklch(55% 0.2 320);\n  --grad-to:   oklch(55% 0.2 200);\n}\n\n/* Morph shapes */\n.my-blob   {\n  --morph-from: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n  --morph-to:   polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n}\n\n/* Typewriter length */\n.my-heading { --chars: 20; }\n\n/* Marquee speed */\n.my-ticker  { --marquee-duration: 10s; }\n```\n\n---\n\n## Tree-Shaking\n\nImport only the categories you use. Each file is fully independent:\n\n```css\n/* Only include what you need */\n@import \"arc-animations/src/base.css\";       /* required — CSS vars + a11y reset */\n@import \"arc-animations/src/entrances.css\";  /* 19 entrance animations */\n@import \"arc-animations/src/exits.css\";      /* 18 exit animations */\n@import \"arc-animations/src/attention.css\";  /* 14 attention animations */\n@import \"arc-animations/src/loading.css\";    /* 8 loading patterns */\n@import \"arc-animations/src/scroll.css\";     /* 4 scroll-driven + stagger */\n@import \"arc-animations/src/effects.css\";    /* 8 special effects */\n```\n\n| File | Size | Animations |\n|------|------|------------|\n| `src/base.css` | 0.4 KB | CSS vars + a11y reset |\n| `src/entrances.css` | 6.2 KB | 19 |\n| `src/exits.css` | 5.8 KB | 18 |\n| `src/attention.css` | 5.1 KB | 14 |\n| `src/loading.css` | 5.0 KB | 8 |\n| `src/scroll.css` | 3.2 KB | 4 + stagger |\n| `src/effects.css` | 8.0 KB | 8 |\n| `index.css` (all) | **34 KB** | **71** |\n\n---\n\n## HTML Patterns\n\nSome animations require specific markup:\n\n```html\n\u003c!-- Skeleton shimmer --\u003e\n\u003cdiv class=\"skeleton\" style=\"width:200px;height:20px;\"\u003e\u003c/div\u003e\n\n\u003c!-- Bouncing dots --\u003e\n\u003cspan class=\"dots\"\u003e\u003ci\u003e\u003c/i\u003e\u003ci\u003e\u003c/i\u003e\u003ci\u003e\u003c/i\u003e\u003c/span\u003e\n\u003cstyle\u003e.dots i { background: currentColor; width:8px; height:8px; border-radius:50%; }\u003c/style\u003e\n\n\u003c!-- Ping badge --\u003e\n\u003cdiv class=\"ping\" style=\"width:12px;height:12px;border-radius:50%;background:#22c55e;color:#22c55e\"\u003e\u003c/div\u003e\n\n\u003c!-- Progress bar --\u003e\n\u003cdiv class=\"progress-bar\" style=\"color:#6366f1\"\u003e\n  \u003cdiv class=\"progress-bar__fill\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Orbit loader --\u003e\n\u003cdiv class=\"orbit\" style=\"color:#6366f1\"\u003e\n  \u003cdiv class=\"orbit__dot\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Equalizer wave --\u003e\n\u003cspan class=\"wave\" style=\"color:#6366f1\"\u003e\u003ci\u003e\u003c/i\u003e\u003ci\u003e\u003c/i\u003e\u003ci\u003e\u003c/i\u003e\u003ci\u003e\u003c/i\u003e\u003ci\u003e\u003c/i\u003e\u003c/span\u003e\n\u003cstyle\u003e.wave i { background:currentColor; display:inline-block; }\u003c/style\u003e\n\n\u003c!-- Typewriter (monospace, set --chars to character count) --\u003e\n\u003cp class=\"typewriter\" style=\"--chars:24\"\u003eYour text here exactly 24 chars\u003c/p\u003e\n\n\u003c!-- Marquee (duplicate content for seamless loop) --\u003e\n\u003cdiv class=\"marquee\"\u003e\n  \u003cdiv class=\"marquee__track\"\u003eItem · Item · Item · \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; Item · Item · Item · \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Flip card --\u003e\n\u003cdiv class=\"flip-card\" style=\"width:200px;height:120px\"\u003e\n  \u003cdiv class=\"flip-card__inner\"\u003e\n    \u003cdiv class=\"flip-card__front\"\u003eFront side\u003c/div\u003e\n    \u003cdiv class=\"flip-card__back\"\u003eBack side\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Count-up (scroll entry triggers JS counting) --\u003e\n\u003cspan class=\"count-up\" data-target=\"12500\"\u003e0\u003c/span\u003e\n\u003c!-- Requires 10-line JS snippet — see src/scroll.css for the full snippet --\u003e\n```\n\n---\n\n## Browser Support\n\n| Feature | Chrome | Firefox | Safari | Edge |\n|---------|:------:|:-------:|:------:|:----:|\n| All `@keyframes` animations | 43+ | 16+ | 9+ | 79+ |\n| CSS custom properties | 49+ | 31+ | 9.1+ | 15+ |\n| `animation-timeline: view()` (scroll-driven) | 115+ | ✗ | ✗ | 115+ |\n| `clip-path` morph | 55+ | 54+ | 13.1+ | 79+ |\n| `backface-visibility` (flip-card) | 12+ | 10+ | 4+ | 12+ |\n| `filter: blur()` | 18+ | 35+ | 9.1+ | 79+ |\n\nScroll-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.\n\n---\n\n## Accessibility\n\n`src/base.css` automatically injects:\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\nAll 71 animations collapse to instant on systems with reduced motion enabled. No per-animation opt-out needed.\n\n---\n\n## Arc Integration\n\n`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.\n\n```arc\npage \"Hero\"\n  design\n    hero\n      animate: fade-in 0.4s ease   /* Arc's built-in */\n```\n\n```html\n\u003c!-- Use arc-animations for everything else --\u003e\n\u003clink rel=\"stylesheet\" href=\"arc-animations/src/entrances.css\"\u003e\n\u003cdiv class=\"animate-zoom-in\"\u003e...\u003c/div\u003e\n```\n\n---\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md). Bug reports and animation requests welcome via [GitHub Issues](https://github.com/arc-language/arc-animations/issues).\n\n---\n\n## License\n\nMIT. See [LICENSE](LICENSE).\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\u003csub\u003ePart of the \u003ca href=\"https://github.com/arc-language/arc-web\"\u003eArc\u003c/a\u003e ecosystem. Zero dependencies. Zero JS. Pure CSS.\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farc-language%2Farc-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farc-language%2Farc-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farc-language%2Farc-animations/lists"}