yesiamrocksCSS Animation Library for Developers and Ninjas — cssanimation.io
A Powerful CSS Animation Library with GSAP Support for Advanced Motion Design.
cssanimation.io is a lightweight, modular CSS animation library built for front-end developers, creative coders, and UI ninjas. Get access to A Rich Set of Ready-to-Use Animation Classes (both pure CSS and GSAP-powered!) to bring your interfaces to life. From simple fades and zooms to dynamic letter effects and 3D transitions, we’ve got your motion design needs covered.
You're in control. Just apply the class names where you want them. Zero setup. No JavaScript needed (unless you want GSAP). Just clean, reusable animations that "just work."
Why Developers Love It
- Extensive Library of Pre-built Animations: Easily add fades, zooms, rotates, bounces, skews, and much more.
- GSAP support: Integrate powerful animations with GreenSock for advanced control.
- Text, Element, & Letter Animations: Bring life to individual letters, words, or entire elements.
- Super Easy to Use: Just add a class and your animation is live. Seriously!
- Highly Customizable: Tweak animation properties to fit your design perfectly.
- Zero JavaScript Dependencies (for CSS-only): Keep your project lean and fast.
- Modern Dev Friendly: Works great with Tailwind CSS, React, and your favorite build tools.
🛠️ Get Started: Installation
Choose the method that fits your workflow best.
Install via NPM
npm i cssanimationioImport Everything (Core Library, CSS Utility Classes & Letter Animation):
import 'cssanimationio';Individual Imports (if you only need specific parts):
CSS only
// Core CSS animations
import 'cssanimationio/css';
// Utility CSS classes (like speed, delay, easing)
import 'cssanimationio/utility';For Letter Animations (JavaScript required for this part):
//letter-by-letter, word-by-word, and line-by-line animations
import 'cssanimationio/letter';Install via CDN
Quickly add cssanimation.io to your HTML. Include these lines in your <head>tag:
<head>
<link href="https://cdn.jsdelivr.net/npm/cssanimationio@latest/dist/cssanimation.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/cssanimationio@latest/dist/cssanimation-utility.min.css" rel="stylesheet" />
</head>🧩 How to Use It
Once installed, simply add the base.cssanimation to your element, along with your chosen animation class like .ca__fx-FadeIn for fade in animation.
<h1 class="cssanimation ca__fx-FadeIn">cssanimation</h1>That's it! You've got a CSS animated element. Super! 🎉
For the demo and list of animation class name click here.
Understanding Our Class Prefixes
We use clear prefixes to help you find the right animation or utility class.
| Prefix | Description | Example Usage |
|---|---|---|
ca__fx- |
Visual FX animations (pure CSS) | <h1 class="ca__fx-BounceX"> |
ca__u- |
Utility classes (pure CSS spacing, layout, etc.) | <h1 class="ca__u-SpeedChill"> |
🔡 Amazing Text & Letter Animations
Want to animate text beautifully, responsively, and with zero dependencies (for the core CSS parts)?
ca-letteranimation.js plugin is a lightweight, CSS-only enhancement script that brings letter-by-letter, word-by-word, and line-by-line animations to your projects. It's designed to work seamlessly with cssanimation.io, for robust and customizable text effects.
Key Features
- Highly customizable: Control animations directly with HTML attributes.
- Animate Letters, Words, and Lines: Independent control for precise effects.
- Custom CSS Animation Classes: Use any cssanimation.io class you like.
- Sequential Animation Logic: Units wait for the previous one to complete.
- Random & Reverse Effects: Get creative with animation order.
- Smart Handling: Safely handles whitespace and provides animation class fallbacks.
Letter Animation Installation
If you're already using cssanimation.io via NPM, you're all set!
For plain HTML, include the ca-letteranimation.js, plugin just before your closing </body> tag:
<script src="https://cdn.jsdelivr.net/npm/cssanimationio@latest/dist/ca-letteranimation.js"></script>Letter Animation Usage
Every animated text block needs the .cssanimation class along with a ca__lt-* attribute to define how it animates.
1. Letter-by-Letter Animation
Animate text one letter at a time with different sequencing styles:
➜ Sequential (in order): ca__lt-sequence
<h1 class="cssanimation" ca__lt-sequence="ca__fx-FadeIn">Letters Animate</h1>➜ Randomized order ca__lt-random
<p class="cssanimation" ca__lt-random="ca__fx-BounceInTop">Randomized entry!</p>➜ Reverse (last letter first) ca__lt-reverse
<h3 class="cssanimation" ca__lt-reverse="ca__fx-MoveFromTop">Backwards Flow</h3>2. Word-by-Word Animation ca__lt-word
<h2 class="cssanimation" ca__lt-word="ca__fx-FadeIn">Each word animates uniquely</h2>3. Line-by-line Animation ca__lt-line
<p class="cssanimation" ca__lt-line="ca__fx-FadeIn">
First line<br />
Second line<br />
Third line
</p>Split lines by periods "." or by <br> / \n. Use ca__lt-separator="dot" for period separation.
<p class="cssanimation" ca__lt-line="ca__fx-FadeIn" ca__lt-separator="dot">Step 1. Step 2. Step 3.</p>You don't need to add ca__lt-separator for <br> or newlines, this is the default behavior.
🔥You can assign different animation classes and delays to each word and line! Space-separate your class names and delay values.
<h2 class="cssanimation" ca__lt-word="ca__fx-FadeIn ca__fx-MoveFromTop ca__fx-MoveFromBottom ca__fx-MoveFromRight">
Each word animates uniquely
</h2><p class="cssanimation" ca__lt-line="ca__fx-BlurIn ca__fx-BounceFromTop ca__fx-BounceX">
First line<br />
Second line<br />
Third line
</p>⏱️ ca__lt-delay in Detail
The ca__lt-delay attribute specifies the delay before each animated unit (letter, word, or line) begins its animation. The values are in milliseconds (ms).
Single Value: If you provide a single value, that delay will be applied to every unit.
<h1 class="cssanimation" ca__lt-sequence="ca__fx-FadeIn" ca__lt-delay="100">Each letter delays by 100ms</h1>Multiple Values: This is where it gets powerful! You can provide multiple space-separated values. These values will be applied sequentially to each unit. If you provide fewer delay values than there are units, the last delay value will repeat for the remaining units.
<h2 class="cssanimation" ca__lt-word="ca__fx-FadeIn" ca__lt-delay="0 200 400">
First word, then 200ms, then 400ms, then 400ms
</h2>This allows you to create rhythmic or staggered entry effects easily, like ca__lt-delay="50 100 100" as in your example. The first unit gets 50ms delay, and all subsequent units get 100ms delay.
⌛ ca__lt-base-duration in Detail
The ca__lt-base-duration attribute provides a simple way to set a global default animation duration for all units (letters, words, or lines) in milliseconds (ms).
This value is used to explicitly set the duration for all units, overriding any animation-duration or transition-duration that might be detected from the CSS classes applied to the element.
<h3 class="cssanimation" ca__lt-sequence="ca__fx-PopIn" ca__lt-base-duration="750">Global base duration</h3>Precedence:
ca__lt-base-duration(global override)- CSS-defined duration (auto-detected from your animation class if
ca__lt-base-durationis absent) - Internal library default (if no duration is specified anywhere)
This means ca__lt-base-duration gives you a convenient way to set a project-wide or component-wide default duration without needing to edit CSS.
🏷️ Supported Attributes for Text Animations Plugin
| Attribute | Description |
|---|---|
ca__lt-sequence |
Animates letter-by-letter, in order. |
ca__lt-random |
Animates letter-by-letter, in a randomized order. |
ca__lt-reverse |
Animates letter-by-letter, in reverse order (last letter first). |
ca__lt-word |
Animates word-by-word. |
ca__lt-line |
Animates line-by-line. |
ca__lt-delay |
Accepts one or more delay values (e.g., 100 300 500) in milliseconds per unit. |
ca__lt-base-duration |
Optional base animation duration per unit (in ms) |
ca__lt-separator |
Use dot to split on periods ( . ). Default: line breaks (<br> or \n) |
💡Developer Tips
- The
.cssanimationclass is always required for baseline styling and to activate text animations. - You can provide fewer classes or delay values than units; the last value will simply repeat for the remaining units, making it easy to apply a pattern.
- If you pass more classes or values than needed, the extra elements are skipped, and a warning might be logged to your console to help with debugging.
- Delay and duration values are parsed safely; non-numeric strings will fall back to default behaviors to prevent errors.
- Animation duration is determined in this order of precedence:
ca__lt-base-duration> CSS-detected duration > internal default.
Example: Full Setup
<h2 class="cssanimation" ca__lt-word="fadeIn bounce slide rotate" ca__lt-delay="200 300 400" ca__lt-duration="1000">
Animate each word smoothly
</h2>📦 Modular Import
Want to keep your bundle size minimal? Only import the effects you actually use!
HTML
<link rel="stylesheet" href="./dist/modules/ca__FadeIn.css" />CSS or SCSS
@import './dist/modules/ca__fx-fadeIn.css';JavaScript (Webpack/Vite/Rollup)
import './dist/modules/ca__fx-fadeIn.css';Available Modules
Each module is generated from ./dist/cssanimation.css and follows the naming convention: ca__fx-[animationName].css. Check out the ./dist/modules/ folder to see them all!
| Module | File |
|---|---|
| Blur In | ./dist/modules/ca__fx-blurIn.css |
| Blur Out | ./dist/modules/ca__fx-blurOutLeft.css |
| Jello | ./dist/modules/ca__fx-jello.css |
| Jitter | ./dist/modules/ca__fx-jitter.css |
| Quiver | ./dist/modules/ca__fx-quiver.css |
| ...and more | See ./dist/modules/ folder |
🧰 Utility Class
cssanimation.io also provides a powerful set of pre-built utility classes to fine-tune your animations. Use them alongside the .cssanimation base class and your chosen animation class.
This includes:
.ca__u-speed*: Control animation speed (e.g.,.ca__u-speedChill)..ca__u-ease*: Set easing functions (e.g.,.ca__u-easeSnappy)..ca__u-loop*: Define repeat settings (e.g.,.ca__u-loopTriple)..ca__u-delay*: Add animation delays (e.g.,.ca__u-delay3).
Check out the full list and details in cssanimation-utilities.md.
🎉 That’s It!
Elevate with GSAPAnimation
Looking to go beyond CSS with scroll triggers, advanced sequencing, and even more control?
👉 Check out GSAPAnimation
It's a lightweight GSAP toolkit built to extend
cssanimation.iowith JavaScript superpowers.
ca__gx-FadeIn: Our "Gold Standard" GSAP animations.ca-gsap-options='{}': Easily pass GSAP options directly to your animation functions.ca__gx-lt: For powerful per-letter motion (sequence, random, reverse).- Zero-setup: Plug-and-play with any HTML — no complex JS setup needed.
<h1 ca-gsap="ca__gx-FadeIn" ca__gx-lt="sequence">cssanimation.io GSAP</h1>Explore GSAPAnimation for more magic»
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: Respecting User Preferences
By default, cssanimation.io respects user system preferences. When prefers-reduced-motion: reduce is enabled in a user's operating system settings, animations are automatically turned off for a more comfortable user experience.
License
cssanimation.io is licensed under the Parity Public License.
Contribute
We welcome issues, pull requests, and suggestions! 🤝 Help us make animations even more magical for everyone.
