DOCSEARCHbyAlgolia
Submit Docs

Animate.css

repository·main·Indexed 13 days ago

https://github.com/animate-css/animate.css

A cross-browser library of ready-to-use CSS animations (v4.1.1) that allows developers to add motion to web elements using predefined classes. It features a base `.animate__animated` class and a wide variety of animation categories including attention seekers, entrances, and exits. The library supports global customization via CSS variables like `--animate-duration` and `--animate-delay`, and automatically respects the `prefers-reduced-motion` media query for accessibility.

Tokens
7.1K
Snippets
39
Records
50
Agent score
86%

What's inside Animate.css

  2. Respect user motion preferences with prefers-reduced-motion

    main
    Animate.css automatically supports the prefers-reduced-motion media query. If a user has enabled 'reduce motion' in their operating system settings, Animate.css will turn off CSS transitions for them automatically without requiring any additional configuration from the developer.

  3. Respect user motion sensitivity with prefers-reduced-motion

    main
    Animate.css automatically respects the prefers-reduced-motion media query. If a user has enabled 'Reduce Motion' settings at the operating system level, Animate.css will disable CSS transitions and animations for them automatically. No additional configuration or code is required to support this accessibility feature on major browsers and operating systems.

  4. Create a custom Animate.css build

    main

    You can create a custom, optimized build of Animate.css by cloning the repository and using the provided build tools. Note that custom builds cannot be performed directly from the node_modules folder because the building tools are not included in the npm package.

    To create a custom build:

    1. Clone the repository and install dependencies.
    2. Modify ./source/animate.css to include only the specific animations you need by editing the @import statements.
    3. Run the build command.

    This process generates three files in the project root:

    • animate.css: The raw, unoptimized build.
    • animate.min.css: The minified build for production.
    • animate.compat.css: A minified build without the class prefix, intended for migration purposes.
    $ git clone https://github.com/animate-css/animate.css.git
$ cd animate.css
$ npm install
$ npm start

  5. Update Animate.css import for bundlers

    main

    If you are upgrading an existing project using a bundler (like Webpack, Vite, or Rollup) and want to maintain compatibility with v3.x class names (no prefix), change your import statement from animate.min.css to animate.compat.css.

    // Use this to keep using non-prefixed classes (e.g., 'bounce')
import 'animate.compat.css';

  6. Update Animate.css CDN link for v4.x compatibility

    main

    If you are using a CDN, update your <link> tag to point to animate.compat.css instead of animate.min.css to ensure your existing non-prefixed animation classes continue to work.

    <!-- Use this for compatibility with v3.x non-prefixed classes -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
/>

  8. Control animation speed with utility classes

    main

    You can modify the duration of an animation by adding speed utility classes. These classes override the default 1s duration of the animate__animated class.

    Available speed classes:

    • animate__slow: 2s
    • animate__slower: 3s
    • animate__fast: 800ms
    • animate__faster: 500ms
    <div class="animate__animated animate__bounce animate__faster">Example</div>

  11. Animate block or inline-block elements, not inline elements

    main
    According to CSS animation specifications, animating elements with display: inline can be unreliable and may break in certain browsers. To ensure consistent behavior, always animate elements that are block or inline-block (this includes grid and flex containers/children). If you need to animate an inline element, change its display property to inline-block.

  12. Control animation repetition with utility classes

    main

    You can control how many times an animation repeats by adding repetition utility classes.

    Available repetition classes:

    • animate__repeat-1: 1 iteration
    • animate__repeat-2: 2 iterations
    • animate__repeat-3: 3 iterations
    • animate__infinite: infinite iterations

    Note: animate__infinite does not use the --animate-repeat custom property and will not be affected by changes to it.

    <div class="animate__animated animate__bounce animate__repeat-2">Example</div>