Animate.css — ready-to-use CSS animations

Tool powered by Animate.css on Animate.css.

Browse Animate.css on animate.style: animate styles, text fade out, animated sections, tw-animate-css patterns, and cross-browser CSS animation classes.

What is Animate.css?

Animate.css (https://animate.style/) is a free CSS animations library with preset entrance, exit, and attention effects. Developers searching for animate styles, text fade out motion, or animated section CSS often start here because classes use the `animate__` prefix and work with npm, CDN, or Tailwind-oriented setups such as tw-animate-css. This page links to the official site alongside /animista and /easings. This site does not host the library or change its class names.

What Animate.css offers

A class-based CSS animations library for product UI.

  1. Large preset catalog: Bounce, fade, zoom, rotate, slide, and attention effects with consistent `animate__` naming.

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

  3. Delay, speed, and repeat utilities: Utility classes and CSS variables tune timing without custom keyframes for every variant.

  4. npm and CDN distribution: Install via package manager or link a stylesheet for fast prototypes and marketing pages.

  5. Text fade and section animation presets: Use text fade out classes and animated section patterns for headlines, heroes, and block reveals.

  6. Icon and button micro-interaction effects: Apply subtle emphasis, hover, and entrance effects to icons and buttons without custom keyframes.

  7. 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 on animate.style 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.style 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.

  1. Landing and marketing pages: Add hero and feature section motion with animate styles instead of bespoke keyframes.

  2. Product engineers: Ship text fade out, modals, and notifications with a documented class library.

  3. Designers prototyping in the browser: Validate animated section ideas before handing off to a design-system motion spec.

  4. Documentation and demos: Show animation behavior with readable class names in code samples.

Why open Animate.css

Official docs reference without replacing animate.style.

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

  • does not ship the library

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

Technical notes

Embed and implementation boundaries.
Official source
The animate.style 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 https://animate.style/ in a new tab.

Frequently Asked Questions

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