# Animate.css — Cross-Browser CSS Animation Library

> A collection of ready-to-use, cross-browser CSS animations for use in your web projects. Drop-in class names for entrances, exits, attention seekers, and more.

## Install

Save as a script file and run:

# Animate.css — Cross-Browser CSS Animation Library

## Quick Use
```bash
npm install animate.css
# Then in your JS entry point:
# import 'animate.css';
# Or via CDN in HTML:
# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
```

## Introduction
Animate.css provides dozens of plug-and-play CSS animations you can apply with a single class name. It removes the need to write custom keyframes for common UI transitions, making it a go-to choice for adding motion to web interfaces quickly.

## What Animate.css Does
- Supplies 80+ named animations (bounce, fade, flip, rotate, zoom, slide, and more)
- Works by adding utility classes like `animate__animated animate__fadeIn` to any HTML element
- Supports CSS custom properties for duration, delay, and iteration control
- Ships as a single CSS file with no JavaScript dependency
- Provides reduced-motion media query support for accessibility

## Architecture Overview
Animate.css is a pure CSS library consisting of a collection of `@keyframes` definitions and corresponding utility classes. Each animation is self-contained; the `.animate__animated` base class sets `animation-duration` and `animation-fill-mode`, while modifier classes reference specific keyframes. Custom properties like `--animate-duration` let consumers override timing without writing extra CSS.

## Self-Hosting & Configuration
- Install via npm, yarn, or include the CDN link in your HTML head
- Import the full library or cherry-pick individual animations to reduce bundle size
- Override `--animate-duration`, `--animate-delay`, and `--animate-repeat` with CSS custom properties
- Use the `animate__infinite` or `animate__repeat-{n}` utility classes for looping
- Tree-shake unused animations by importing only needed modules from the source

## Key Features
- Zero JavaScript — entirely CSS-driven with no runtime overhead
- Accessible by default with `prefers-reduced-motion` detection
- Works in all modern browsers and IE 10+
- Tiny footprint (around 80 KB unminified, much smaller when tree-shaken)
- Easy composition — combine with JS libraries or frameworks for enter/exit transitions

## Comparison with Similar Tools
- **Motion (Framer Motion)** — JS-based React animation library with gesture support; heavier but more dynamic
- **GSAP** — professional-grade JS animation engine for complex timelines; steeper learning curve
- **AOS (Animate On Scroll)** — scroll-triggered animations; depends on JS for triggering
- **Hover.css** — focused on hover-state effects rather than general-purpose animations
- **CSS Transition API** — native browser API; more control but requires writing all keyframes manually

## FAQ
**Q: Can I use Animate.css with React or Vue?**
A: Yes. Add the class names dynamically via state or use transition utilities in your framework to apply them on mount/unmount.

**Q: How do I reduce the file size if I only need a few animations?**
A: Import individual animation files from the source directory or use a build tool to tree-shake unused classes.

**Q: Does Animate.css support reduced motion preferences?**
A: Yes. Version 4+ respects `prefers-reduced-motion` by disabling animations automatically for users who prefer reduced motion.

**Q: Can I customize the animation speed globally?**
A: Set `--animate-duration` on `:root` or on a specific element to override the default 1-second duration.

## Sources
- https://github.com/animate-css/animate.css
- https://animate.style/

---
Source: https://tokrepo.com/en/workflows/f077408c-41ce-11f1-9bc6-00163e2b0d79
Author: Script Depot