aidenleads / css-animation-snippets

# CSS Animation Snippets
Free, copy-paste CSS animations for business websites. No frameworks and no build step: one CSS file, plus an optional 2 KB script for scroll effects.
**Live demo →**
- 25+ animations: entrances, scroll reveals, hover effects, loaders, attention seekers, text effects
- Works on any site: plain HTML, WordPress, Shopify, Webflow, Squarespace (custom code), React, etc.
- Rebrand everything by changing a few CSS variables
- Built-in accessibility: honors the visitor's "Reduce motion" setting and keyboard focus
- MIT licensed, free for personal and commercial use
---
## Quick start
**1. Get the files.** Download the ZIP from the green **Code** button, or:
 [code] 
**2. Add them to your page's ` `:**
 [code] 
**3. Add a class:**
 [code] 
That's it.
---
## Snippet reference
### Entrance (play once on page load)
| Class | Effect |
|---|---|
| `anim-fade-in` | Fades in |
| `anim-slide-up` / `-down` / `-left` / `-right` | Fades in while sliding |
| `anim-zoom-in` | Fades in while growing from 90% |
| `anim-flip-in` | Flips down like a card |
### Scroll reveal (needs `scroll-reveal.js`)
 [code] 
Types: `fade`, `up`, `down`, `left`, `right`, `zoom`.
> **Tip:** `left`/`right` slides start slightly off-position, which can cause a sideways scrollbar on phones. Add `body { overflow-x: clip; }` to your CSS to prevent it.
### Hover (also react to keyboard focus)
| Class | Effect | Good for |
|---|---|---|
| `anim-hover-lift` | Rises with a deeper shadow | Product / service cards |
| `anim-hover-grow` | Scales to 105% | Images, icons |
| `anim-underline` | Underline draws in | Navigation links |
| `anim-shine` | Light streak sweeps across | Call-to-action buttons |
| `anim-btn-fill` | Color fills from left | Outline buttons |
### Loaders
 [code] 
> `.sr-only` isn't in the library. Copy it from `demo/demo.css` if your site doesn't already have one.
### Attention seekers
| Class | Plays | Good for |
|---|---|---|
| `anim-pulse` | Forever | Sale badges |
| `anim-ping` | Forever | "Live" / notification dots |
| `anim-shake` | Once | Form errors |
| `anim-bounce` | Once | "Scroll down" arrows |
| `anim-wiggle` | Once | Cart icon after adding an item |
Add `anim-infinite` to make a one-time effect loop.
### Text
 [code] 
### Utilities
| Class | Does |
|---|---|
| `anim-delay-1` … `anim-delay-5` | Delay 100 ms … 500 ms |
| `anim-fast` / `anim-slow` | 300 ms / 1200 ms duration |
| `anim-infinite` | Loop forever |
---
## Customize
Override any of these in your own CSS (after `animations.css`):
 [code] 
Or per element: ` `.
---
## Using with website builders
- **WordPress:** upload the files to your theme (or use a "custom CSS/JS" plugin), then add classes in the block's *Advanced → Additional CSS class(es)* field.
- **Shopify:** upload to *Assets*, then link them in `theme.liquid` inside ` `.
- **Webflow / Squarespace / Wix:** paste the contents of `animations.css` into the site-wide custom code area inside a ` ` tag, and `scroll-reveal.js` inside a