Animate.css — Cross-Browser CSS Animation Library

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/