Animate.css — ready-to-use CSS animations

Tool powered by Animate.css on Animate.css.

Pick entrance, exit, and attention animations with animate__ classes—copy CSS for npm, CDN, or Tailwind setups.

What is Animate.css?

Pick entrance, exit, and attention animations with animate__ classes—copy CSS for npm, CDN, or Tailwind setups.

What Animate.css offers

A class-based CSS animations library for product UI.

  • Large preset catalog

    Bounce, fade, zoom, rotate, slide, and attention effects with consistent `animate__` naming.

  • animate__animated class pattern

    Add `animate__animated` plus one effect class to activate motion on any element.

  • Delay, speed, and repeat utilities

    Utility classes and CSS variables tune timing without custom keyframes for every variant.

  • npm and CDN distribution

    Install via package manager or link a stylesheet for fast prototypes and marketing pages.

  • Text fade and section animation presets

    Use text fade out classes and animated section patterns for headlines, heroes, and block reveals.

  • Icon and button micro-interaction effects

    Apply subtle emphasis, hover, and entrance effects to icons and buttons without custom keyframes.

  • Works beside the motion tools

    Compare with Animista for custom keyframes or Cubic Bezier and Easings for easing curves.

How to use Animate.css

From preview to production CSS.

  1. Pick an effect to preview

    Preview animate styles in the embed before you commit class names in your project.

  2. Install or link the stylesheet

    Add Animate.css through npm or CDN so `animate__` classes resolve in your build.

  3. Apply animate__animated plus one class

    Example pattern: `animate__animated animate__fadeIn` on the target element.

  4. Tune delay and duration

    Use utility classes or CSS variables so motion matches your layout, not only the default timing.

  5. Open Animate.css in a new tab if needed

    Copy long snippets or browse the full catalog outside the iframe when navigation is limited.

Tips for UI motion with Animate.css

Motion should clarify state, not distract.
  • 01

    Animate meaningful targets

    Prefer entrances on new content and exits on dismissals—not every div on the page.

  • 02

    Avoid infinite loops by default

    Repeating motion belongs on loaders or subtle indicators, not body copy.

  • 03

    Respect prefers-reduced-motion

    Animate.css supports reduced-motion preferences; test with OS settings enabled.

  • 04

    Check performance on real devices

    Large animated sections can still jank; reduce simultaneous animations on low-end hardware.

Who this is for

Frontend teams shipping motion quickly.

  • Landing and marketing pages

    Add hero and feature section motion with animate styles instead of bespoke keyframes.

  • Product engineers

    Ship text fade out, modals, and notifications with a documented class library.

  • Designers prototyping in the browser

    Validate animated section ideas before handing off to a design-system motion spec.

  • Documentation and demos

    Show animation behavior with readable class names in code samples.

Why open Animate.css

Official docs reference without replacing the publisher site.

  • Stable directory path

    Link `/animate-style` in specs; Hero attribution points to Animate.css.

  • Near related dev-reference tools

    Continue to Animista or Cubic Bezier for other motion references.

  • This site does not ship the library

    Class names and releases update on the publisher site; this page links to the official site and documents how to use it.

Technical notes

Embed and implementation boundaries.
Official source
The Animate.css site runs in the preview area; install paths are documented on the publisher site.
Class model
Base usage: `animate__animated` plus one `animate__effectName` class per element.
Third-party frame rules
If the frame is blank, open the official Animate.css site in a new tab.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.