CSS Animation Library for Developers and Ninjas — cssanimation.io

> A Powerful CSS Animation Library with GSAP Support for Advanced Motion Design.



!CSS


cssanimation.io is a lightweight, modular CSS animation library designed for developers, designers, and UI ninjas. It provides over 300+ CSS and GSAP-powered plug-and-play animation classes to bring your interfaces to life — from simple fades and zooms to dynamic letter effects and 3D transitions.

You stay in control, just apply the class names when and where you want them. Zero setup. Just clean, reusable animations.

$3

- Over 300 prebuilt animations: fade, zoom, rotate, fly, bounce, skew, and more.
- GSAP support: Add powerful animations with GreenSock.
- Animations for text, elements and individual letters.
- Easy to use: just add a class, and your animation is live.
- Customizable: tweak animation properties to fit your design.
- Zero JavaScript, no dependencies, and fine-grained control.

!CSS Animation CSS Animation Guide

$3

#### Install via NPM

``bash
npm i cssanimationio
`

#### Import Everything with One Line

`bash
import 'cssanimationio';
`

This will:

- Load all core CSS animations
- Load all utility classes
- Initialize the letter animation engine
- Import all GSAP animations and make them ready to use

#### Full GSAP + CSS Import (Bundler)

`bash
import 'cssanimationio/css';
import { animationMap } from 'cssanimationio/gsap';
`

#### Individual Imports

CSS only

`bash
import 'cssanimationio/css'; // Core CSS
import 'cssanimationio/utility'; // Utility CSS
`

GSAP only

`bash
import { animationMap } from 'cssanimationio/gsap';
// or use CDN/UMD from cssanimationio/gsap/min.js
`

CSS Letter Animation

`bash
import { initLetterAnimations } from 'cssanimationio/letter';
`

$3

Include the cssanimation.css library into the :

`html

href="https://cdn.jsdelivr.net/npm/cssanimationio@latest/dist/cssanimation.min.css"
rel="stylesheet"
/>

`

$3

After installing cssanimation.css library, now add the class .cssanimation and the class of animation name like .ca__fx-FadeIn for fade in animation to an element. For list of animation class name click here.

`html

cssanimation

`

_That's it! You've got a CSS animated element. Super! 🎉_

$3

| Prefix | Description | Example Usage |
| --------- | ------------------------------------------------ | ------------------------------- |
| ca__fx- | Visual FX animations (pure CSS) |

|
| ca__u- | Utility classes (pure CSS spacing, layout, etc.) |

|
| ca__lt- | Letter-based animations |

|

How to Use CSS Letter Animations

Want to animate text, letter by letter?

The cssanimation.io library includes 100+ letter-based effects (.ca__lt-FadeIn, .ca__lt-ZoomIn, .ca__lt-Snake, etc.).

cssanimation.io also includes two exclusive types of letter animations: .ca__lt-sequence and .ca__lt-random, which must be added to any element you want to animate letter by letter.

What Are Sequence and Random Animations?

- .ca__lt-sequence – Letters animate one after another, in order.
- .ca__lt-random – Letters animate in a randomized order, adding playful motion.

#### Step 1. Include the Script

You’ve already installed the cssanimation.io library, so there’s nothing else you need to do if you’re bundling it via a module system like Vite, Webpack, or using itwith a framework (React, Vue, etc.).

If you’re using plain HTML without a bundler, just add the following
`

#### Step 2. Add Animation classes to Your HTML

| Class | What It Does |
| ------------------ | ----------------------------------------------- |
| .cssanimation | Base class for all animations (\*required) |
| .ca__lt-FadeIn | A letter animation class (Fades in each letter) |
| .ca__lt-sequence | Animates letters in order or |
| .ca__lt-random | Animates letters in random order |

`html

cssanimation

`

`html

Surprise!

`

#### CSS Letter Animation Delay Control

You can now customize the animation delay between letters using the ca__lt-delay attribute, no need to edit JavaScript!

`html

This will animate letter-by-letter with a 200ms step

Random delay with 50ms steps

`

- ca__lt-delay sets the delay step in milliseconds for each letter span.
- Works for both .ca__lt-sequence and .ca__lt-random classes.

Browse the full list of ca__lt (letter-based) animation classes: Cheatsheet on GitHub

> This feature is exclusive to cssanimation.io — making it perfect for creative headlines, banners, parallax effect, hero sections, and expressive UI storytelling.

Modular Import

#### Only need one effect? Import it like this:

HTML

`html

`

CSS or SCSS

`CSS
@import './dist/modules/ca__LetterFadeIn.css';
`

JavaScript (Webpack/Vite/Rollup)

`js
import './dist/modules/ca__LetterFadeIn.css';
`

Import everything in one go using the index file:

`html

`

`js
import './dist/modules/ca__index.css';
`

#### Available Modules

| Module | File |
| --------------- | -------------------------------- |
| Blur In | ./dist/modules/ca__BlurIn.css |
| Blur Out | ./dist/modules/ca__BlurOut.css |
| Bounce | ./dist/modules/ca__Bounce.css |
| Door Open Close | ./dist/modules/ca__Door.css |
| Dance | ./dist/modules/ca__Dance.css |
| ...and more | See ./dist/modules/ folder |

- Each file is generated from ./dist/modules/cssanimation.css
- Follows the naming convention: ca__[AnimationName].css (PascalCase)
- ca__index.css imports all animation modules

Utility Class

cssanimation.io offers a powerful set of pre-built utility classes. Just use them along with the .cssanimation base class and your chosen animation class.

This includes:

- .ca__u-Speed*: Control speed
- .ca__u-Ease*: Easing control
- .ca__u-Loop*: Repeat settings
- .ca__u-Delay*: Add delays

Check out the full list of utility classes with details in cssanimation-utilities.md.

Combo Example

`html

class="cssanimation ca__fx-zoomIn ca__u-SpeedChill ca__u-Delay3 ca__u-EaseSnappy ca__u-LoopTriple"
>
Magical Entrance!

`

!GSAP Powered GSAP Animation Guide

cssanimation.io isn’t just about CSS – it also supports GSAP (GreenSock Animation Platform), the gold standard for JavaScript animations. With GSAP, you get even more powerful, smooth, and flexible control over your animations.

Supports animations via HTML using ca-gsap attributes, with JSON-configurable options.

Why Use the GSAP Version?

- Smoother and more performant animations.
- Fine control over timing, easing, delays, and sequencing.
- Works great with ScrollTrigger, SplitText, and other GSAP plugins.
- Ideal for creative UI/UX and motion design.

Getting Started with GSAP Version

Here’s how to animate elements using our GSAP-powered version:

#### 1. Install via NPM

`bash
npm install cssanimationio gsap
`

Then in your JavaScript:

`js
// Import GSAP core
import { gsap } from 'gsap';
`

#### Or Include via CDN. If you're working without a bundler:

`html





`

$3

Add the GSAP animation name in the ca-gsap data atribute like:

`html

cssanimation.io GSAP

`

- ca-gsap="ca__gx-FadeIn" – selects which animation to use
- ca-gsap-options='{}' – passes GSAP options to the animation function

📌 Tip: Check the full list of animation class names in the cssanimation-reference.md.

$3

You can control GSAP animation parameters using a JSON string inside the ca-gsap-options attribute:

`html

ca-gsap="ca__gx-FadeIn"
ca-gsap-options='{
"from": { "opacity": 0, "y": 80, "scale": 0 },
"to": { "opacity": 1, "y": 0, "duration": 1.5, "ease": "sine.out", "scale": 1.2 }
}'
>
Custom Animated Box

`

You can use any valid GSAP properties, including:
| Option | Example |
| ------------------ | ---------------------- |
| x, y | "y": 50 |
| duration | "duration": 1.2 |
| delay | "delay": 0.5 |
| repeat | "repeat": -1 |
| yoyo | "yoyo": true |
| ease | "ease": "sine.inOut" |
| opacity | "opacity": 0.7 |
| rotation | "rotation": 45 |
| scaleX, scaleY | "scaleX": 1.3 |

$3

Invalid JSON:

`html

❌ Missing leading 0

`

Correct:

`html

✔️ Valid

`

$3

- Always use double quotes (")
- Include leading zeros (0.5, not .5)
- No trailing commas

$3

You can apply letter-by-letter GSAP animation, by using the ca__gx-lt attribute with one of the following modes:

- sequence – animates letters from left to right
- reverse – animates letters from right to left
- random – animates letters in random order

Use it alongside the ca-gsap attribute like this:

`html

letter-by-letter GSAP animation

letter-by-letter GSAP animation

letter-by-letter GSAP animation

`

Each letter will be automatically wrapped in a and animated based on the chosen order mode.

$3

CSS vs. GSAP – Which Animation Version Should You Use?

| Feature / Capability | CSS Version | GSAP Version |
| --------------------------- | ------------------------------------ | ----------------------------------------------------- |
| 🧱 Technology | Pure CSS | JavaScript (GSAP) |
| ⚡ Performance | Great for simple UI effects | Optimized for complex, smooth animations |
| 🎛 Control | Fine-grained control via CSS | Fine-grained control via JS (timing, easing) |
| 🎞 Animation Types | Predefined class-based animations | Class-based with dynamic GSAP tweening |
| 🔤 Letter Animation Support | ✅ Sequence & Random | ✅ Sequence only (random coming soon) |
| 🔁 Looping & Repeating | infinite class | Full loop control via JS (e.g. repeat, yoyo) |
| ⚙️ Configuration | Minimal setup | Script includes + optional JS tweaks |
| 🎨 Customization | Moderate (via utility classes) | High — control properties on the fly |
| 📦 Size | Very lightweight (no JS needed) | Heavier due to JS dependency |
| 🧩 Dependencies | None | Requires GSAP (TweenMax) |
| 🌐 CDN Available? | ✅ Yes | ✅ Yes |
| 🛠 NPM Ready? | ✅ Yes (cssanimationio) | ✅ Yes (cssanimationio) |
| 🧠 Use Case Examples | Hover states, hero sections, banners | Interactive animations, scroll triggers, custom flows |

Accessibility: Reduce Motion Support

By default, cssanimation.io respects user system preferences. When prefers-reduced-motion: reduce` is enabled, animations are automatically turned off for a better UX.

License

cssanimation.io is licensed under the Parity Public License.

Contribute

We welcome issues, pull requests, and suggestions! Make your animations even more magical.

!Built with ❤️ by Pavel