CSS Animation Library for Developers and Ninjas - {css}animation

A Powerful CSS Animation Library for Advanced Motion Design. Zero JS Required. Over 500 Effects, Letter, Word & Line Stagger Animations, Utilities, and easy CDN or NPM Install.

{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 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 | Download via NPM | CDN jsDelivr | CDN unpkg

Get Started: Installation

Choose the method that fits your workflow best.

Install via NPM

npm i @hellouxpavel/cssanimation

Or install with Yarn

yarn add @hellouxpavel/cssanimation

Import Everything (Core Library, CSS Utility Classes & Letter Animation):

import '@hellouxpavel/cssanimation';

Individual Imports (if you only need specific parts):

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';

Install via CDN

Quickly add {css}animation 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>

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"> |

Modular Import

Want to keep your CSS bundle size minimal? You can import only the animation groups or individual effects you actually use!

HTML

<!-- Grouped animation (e.g., ca__BlurIn module) -->
<link rel="stylesheet" href="./dist/modules/ca__BlurIn.css" />

CSS, SCSS or JavaScript (Webpack, Vite, Rollup)

// 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

<!-- Individual effect (e.g., fadeIn only) -->
<link rel="stylesheet" href="./dist/animations/ca__fadeIn.css" />

CSS, SCSS or JavaScript (Webpack, Vite, Rollup)

// 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.

🎉 That’s It!

AnimText - Letter, Word & Line Text Animation JS Library

Add Smart Text Animations with 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!

👉 Get Started with AnimText →

Triggle - Simple Trigger-Based CSS Animation Control

Enhance Your {css}animation with Triggers

Want to animate on click, hover, scroll, or keypress — without writing JavaScript?
Meet 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.

👉 Get Started with Triggle →

Accessibility: Respecting User Preferences

{css}animation is built with accessibility in mind. If a user has enabled prefers-reduced-motion: reduce in their system preferences, al

Cssanimation

Install / Use

README