About Animate.css | A cross-browser library of CSS animations.
Overview
Animate.css is a library of ready-to-use CSS animations for web projects. It provides categorized effects for attention seekers, entrances, exits, bouncing, fading, flipping, rotating, zooming, sliding, and other motion patterns.
Developers can install the library with npm or Yarn, import it into a bundled project, or load the minified stylesheet from a CDN. They apply the animate__animated class with an animation class to an element, or use the provided keyframes directly in CSS.
Key Benefits
- Provides ready-to-use CSS animation classes across multiple motion categories.
- Supports npm, Yarn, direct CSS imports, and CDN-based installation.
- Lets developers customize animation duration, delay, and repetition with CSS custom properties.
- Includes utility classes for delays, animation speeds, and repeat counts.
- Supports JavaScript control, animation-end detection, and automatic class cleanup.
- Supports prefers-reduced-motion settings to let users reduce or disable animations.
How It Works
Install Animate.css with npm or Yarn, import the stylesheet or add its CDN link, and place animate__animated plus a named animation class on an element. Developers can adjust timing with utility classes or CSS variables, access keyframes directly, and add JavaScript when they need event handling or dynamic class changes.
Use Cases
- Frontend developers add entrance and exit effects to interface state changes.
- UI designers use attention-seeker animations to draw attention to selected interface elements.
- Web developers animate sliders, home pages, and other presentation areas.
- JavaScript developers detect animation completion and coordinate follow-up actions.
- Accessibility-focused teams respect operating-system reduced-motion preferences.
Why Choose This Product
Animate.css offers a broad catalog of named animations while keeping integration focused on CSS classes and keyframes. Version 4 uses the animate__ class prefix by default, provides a compatibility build for migration from version 3, and supports custom builds through the GitHub source and Node-based tooling.
Animate.css | A cross-browser library of CSS animations. Pros & Cons
- Large catalog of categorized animation classes
- Works with npm, Yarn, and a CDN
- CSS variables customize timing and repetition
- JavaScript event handling is documented
- Reduced-motion support is included
- Inline elements cannot be animated reliably
- Repeated-animation intervals require JavaScript
- Custom builds require cloning the repository and installing dependencies
Key Features
Animation Library
The library provides named animations grouped into categories such as fading, bouncing, rotating, zooming, and sliding.
Package Installation
Developers can install Animate.css with npm or Yarn and import the stylesheet into a project.
CDN Delivery
Developers can add the minified Animate.css stylesheet directly to a webpage through the documented CDN link.
CSS Variables
CSS custom properties define animation duration, delay, and repetition at global or local scope.
Utility Classes
Utility classes provide preset delays, speed values, and repeat counts for animated elements.
JavaScript Hooks
JavaScript can add animation classes, detect animationend events, change duration, and remove classes after completion.
Reduced Motion
The library supports prefers-reduced-motion so supported platforms can disable animations according to user preferences.
Custom Builds
Repository tooling generates raw, minified, and unprefixed compatibility builds from selected source imports.
Animate.css | A cross-browser library of CSS animations. Pricing
- Ready-to-use CSS animation classes
- npm and Yarn installation
- CDN stylesheet usage
- CSS custom property controls
- JavaScript usage examples
Pricing extracted from the product website and may change. Check the source for current details.
Frequently asked questions about Animate.css | A cross-browser library of CSS animations.
What is Animate.css?
Animate.css is a library of ready-to-use, cross-browser CSS animations for web projects, including effects for emphasis, home pages, sliders, and attention-guiding hints.
How do I install Animate.css?
You can install Animate.css with npm or Yarn, import it into a bundled project, or add its minified stylesheet from the documented CDN link.
How do I apply an animation?
Add animate__animated and a named animation class, such as animate__bounce, to the target element. The version 4 classes use the animate__ prefix by default.
Can I customize animation timing?
Yes. CSS custom properties control duration, delay, and repetition globally or on individual elements, and utility classes provide preset timing options.
Can I use Animate.css with JavaScript?
Yes. JavaScript can add animation classes, detect animationend events, change duration, and remove classes after an animation completes.
Does Animate.css support reduced motion?
Yes. Animate.css supports the prefers-reduced-motion media query so users who select reduced motion in their operating-system preferences can opt out on supported platforms.