A Powerful CSS Animation Library for Advanced Motion Design.
cssanimation 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 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."
- 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.
Choose the method that fits your workflow best.
npm i @hellouxpavel/cssanimationyarn add @hellouxpavel/cssanimationimport '@hellouxpavel/cssanimation';CSS only
// Core CSS animations
import '@hellouxpavel/cssanimation/css';
// Utility CSS classes (like speed, delay, easing)
import '@hellouxpavel/cssanimation/utility';For Letter Animations (JavaScript required for this part):
//letter-by-letter, word-by-word, and line-by-line animations
import '@hellouxpavel/cssanimation/letter';For Letter Animations (JavaScript required for this part):
//Trigger-based animation control for HTML elements
import '@hellouxpavel/cssanimation/trigger';Quickly add cssanimation to your HTML. Include these lines in your <head>tag:
<head>
<link
href="https://cdn.jsdelivr.net/npm/@hellouxpavel/cssanimation@latest/dist/cssanimation.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@hellouxpavel/cssanimation@latest/dist/cssanimation-utility.min.css"
rel="stylesheet"
/>
</head>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.
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"> |
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';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 |
cssanimation 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.
Each plugin in this library is designed to be lightweight, flexible, and easy to integrate — whether you're building UI transitions, scroll effects, or expressive text animations.
With the ca-letteranimation.js plugin Bring your typography to life with letter-by-letter, word-by-word, and line-by-line animations.
👉 Explore all animation and docs
Take full control of when animations happen.
The ca-trigger.js plugin lets you trigger any cssanimation effect using simple HTML attributes tied to user interactions like clicks, key presses, or custom events. It's lightweight, flexible, and perfect for interactive UI moments.
👉 Explore Trigger-based Animation docs
By default, cssanimation 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.
cssanimation is licensed under the Parity Public License.
We welcome issues, pull requests, and suggestions! 🤝 Help us make animations even more magical for everyone.
