# CSS Animation Library for Developers and Ninjas - {css}animation
> A Powerful CSS Animation Library for Advanced Motion Design.
  [](https://www.npmjs.com/package/@hellouxpavel/cssanimation)  [](https://www.jsdelivr.com/package/npm/@hellouxpavel/cssanimation) [](https://unpkg.com/browse/@hellouxpavel/cssanimation/) [](https://github.com/yesiamrocks/cssanimation/issues) [](https://github.com/yesiamrocks/cssanimation/stargazers) [](https://yesiamrocks.github.io/cssanimation/index.html) [](https://bundlephobia.com/result?p=@hellouxpavel/cssanimation)  [](https://github.com/yesiamrocks/triggle) [](https://github.com/yesiamrocks/animtext)
**{css}animation** 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](https://yesiamrocks.github.io/cssanimation/index.html) where you want them. **Zero setup. No JavaScript needed. 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.
- 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: Keep your project lean and fast.
- Modern Dev Friendly: Works great with Tailwind CSS, React, and your favorite build tools.
π [Live Demo](https://yesiamrocks.github.io/cssanimation/) | [Download via NPM](https://www.npmjs.com/package/@hellouxpavel/cssanimation) | [CDN jsDelivr](https://www.jsdelivr.com/package/npm/@hellouxpavel/cssanimation) | [CDN unpkg](https://app.unpkg.com/@hellouxpavel/cssanimation@6.10.1)
## Get Started: Installation
Choose the method that fits your workflow best.
#### Install via NPM
```bash
npm i @hellouxpavel/cssanimation
```
#### Or install with Yarn
```bash
yarn add @hellouxpavel/cssanimation
```
#### Import Everything (Core Library, CSS Utility Classes & Letter Animation):
```bash
import '@hellouxpavel/cssanimation';
```
#### Individual Imports (if you only need specific parts):
CSS only
```bash
// 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):
```bash
//letter-by-letter, word-by-word, and line-by-line animations
import '@hellouxpavel/cssanimation/letter';
```
### Install via CDN
Quickly add **{css}animation** to your HTML. Include these lines in your ``tag:
```html
```
### 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.
```html
cssanimation
```
_That's it! You've got a CSS animated element. Super! π_
For the demo and list of animation class name [click here](https://yesiamrocks.github.io/cssanimation.io/).
### 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) | `
` |
## Modular Import
Want to keep your CSS bundle size minimal? You can import only the **animation groups** or **individual effects** you actually use!
HTML
```html
```
CSS, SCSS or JavaScript (Webpack, Vite, Rollup)
```CSS
// Grouped module
@import './dist/modules/ca__BlurIn.css';
```
#### Available Modules
Check out the `./dist/modules/` folder to see all available animation groups:
| Module | File |
| ----------------------- | -------------------------------- |
| Blob Animation Group | `./dist/modules/ca__Blob.css` |
| Blur In Animation Group | `./dist/modules/ca__BlurIn.css` |
| Bounce Animation Group | `./dist/modules/ca__Bounce.css` |
| Elastic Animation Group | `./dist/modules/ca__Elastic.css` |
| FadeIn Animation Group | `./dist/modules/ca__FadeIn.css` |
| ...and more | See `./dist/modules/` folder |
## Individual Animation Imports
Need just one animation, like `fadeIn`, `bounceX`, or `zoomIn`? You can import individual effect files too.
HTML
```html
```
CSS, SCSS or JavaScript (Webpack, Vite, Rollup)
```CSS
// Individual effect
@import './dist/animations/ca__fadeIn.css';
```
#### Available Individual Effects
Each file in the `./dist/animations/` folder is a standalone animation with scoped styles and keyframes. Explore and import only what you need!
## Utility Class
**{css}animation** 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`](./reference/cssanimation-reference.md#utility-classes-ungrouped).
### π Thatβs It!
## Accessibility: Respecting User Preferences
By default, **{css}animation** 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
**{css}animation** is licensed under the [Apache License, Version 2.0](https://github.com/yesiamrocks/cssanimation/blob/master/LICENSE).
## Contribute
We welcome issues, pull requests, and suggestions! π€ Help us make animations even more magical for everyone.
## AnimText
Add Smart Text Animations with [AnimText](https://github.com/yesiamrocks/animtext)
**AnimText** is a lightweight JavaScript plugin that brings your **{css}animation** classes to life β one **letter**, **word**, or **line** at a time.
Perfect for headlines, hero sections, callouts, and more.
- Supports `data-at-sequence`, `data-at-random`, `data-at-word`, `data-at-line`, and more
- Works out of the box with **{css}animation** classes like `ca__fx-fadeIn`
- No dependencies β just plug and play!
[](https://github.com/yesiamrocks/animtext)
π [Get Started with AnimText β](https://github.com/yesiamrocks/animtext)
## Triggle
Enhance Your **{css}animation** with Triggers
**Want to animate on click, hover, scroll, or keypress β without writing JavaScript?**
Meet [**Triggle**](https://github.com/yesiamrocks/triggle) β a zero-dependency helper to trigger **{css}animation** classes using simple `data-triggle-*` attributes.
Works beautifully with **{css}animation** out of the box. Use it to make your animations interactive in seconds.
[](https://github.com/yesiamrocks/triggle)
π [Get Started with Triggle β](https://github.com/yesiamrocks/triggle)
 [](https://www.linkedin.com/in/shafayetul/)
