` and animate that. ### 9.4 Limit infinite animations `animate__infinite` attracts attention forever, which quickly becomes attention-fatigue. Use it only for UI states where "something is ongoing" is the actual message. ### 9.5 Mind the final state Every animation has `animation-fill-mode: both` — the element holds the **end** state after the animation finishes. For exit animations, the element remains in its "faded out" state — still taking up layout space but invisible. If you want an exited element to actually be removed: ```js el.addEventListener('animationend', () => el.remove(), { once: true }); ``` ### 9.6 Never disable `prefers-reduced-motion` The library automatically shortens animations to `1ms` when the OS has "reduce motion" enabled. **Do not override this.** Users who enable reduced-motion typically do so because of a medical condition (vestibular disorders, seizure sensitivity). > [!WARNING] > Overriding the `prefers-reduced-motion` behavior to force animations is an accessibility violation. If an animation is load-bearing for UX (e.g., a page transition), make sure the non-animated state still communicates the change. ### 9.7 Inline elements do not animate CSS animations on `display: inline` elements are undefined by spec — some browsers animate, some do not. If you want to animate a ``, promote it to `inline-block`: ```css .badge { display: inline-block; } ``` Block-level elements, `inline-block`, flex / grid items, and table cells all animate reliably. --- ## 10. Accessibility ### 10.1 `prefers-reduced-motion` is built in Animate.css honors the `prefers-reduced-motion: reduce` media query out of the box. When the user has requested reduced motion, all `.animate__animated` elements play at `1ms` — effectively instantaneous — and iteration count is forced to `1`. The rule is applied at the `@media print, (prefers-reduced-motion: reduce)` level, so printed pages also skip animations. ### 10.2 What this means in practice | User setting | What happens | |---|---| | Motion allowed | Animations play normally | | Reduced motion | Animations complete in `1ms`. Exit animations still leave the element invisible (`opacity: 0`). | | Print | Same as reduced motion — animations are effectively disabled | > [!TIP] > Test your site with reduced motion enabled. On macOS: System Settings -> Accessibility -> Display -> Reduce motion. On Windows: Settings -> Accessibility -> Visual effects -> Animation effects (off). On iOS: Settings -> Accessibility -> Motion -> Reduce Motion. --- ## 11. Troubleshooting ### Error: The animation does nothing **Cause:** Missing `animate__animated`. The animation classes only set `animation-name` — they need `animate__animated` to supply duration and fill-mode. **Solution:** Add both classes: `class="animate__animated animate__fadeIn"`. **Prevention:** Treat the two-class pattern as a hard rule. ### Error: The element disappears after an exit animation **Cause:** Working as designed. `animation-fill-mode: both` holds the final keyframe state, which for exit animations is `opacity: 0` plus an off-screen transform. **Solution:** Remove the element on `animationend`, or remove the classes to reset visibility: ```js el.addEventListener('animationend', () => el.remove(), { once: true }); ``` ### Error: The animation only plays once and I cannot replay it **Cause:** The browser does not restart an animation when you re-add the same class — it sees no change. **Solution:** Force a reflow between remove and add: ```js el.classList.remove('animate__animated', 'animate__bounce'); void el.offsetWidth; el.classList.add('animate__animated', 'animate__bounce'); ``` ### Error: Class names like `bounce` or `fadeIn` do not work **Cause:** You are on v4+, which requires the `animate__` prefix. **Solution:** Either prefix every class (`animate__bounce`, `animate__fadeIn`) or switch the stylesheet you import from `animate.min.css` to `animate.compat.css` (compat ships the v3 unprefixed names). ### Error: Animation causes horizontal / vertical scrollbars **Cause:** Entrance and exit animations translate elements off-screen. Those off-screen frames are valid page content and the browser extends the scrollable area. **Solution:** Add `overflow: hidden` to the nearest container that owns the animation: ```css .animation-wrapper { overflow: hidden; } ``` > [!WARNING] > Do not put `overflow: hidden` on `` unless you mean it — it prevents page scrolling. ### Error: `animate__shake` does not work **Cause:** In v4, `shake` was split into `shakeX` and `shakeY`. The original `shake` class is **not** included in `animate.min.css`. **Solution:** Use `animate__shakeX` or `animate__shakeY`. If you must keep the old name, use `animate.compat.css`. ### Error: `animationend` fires multiple times **Cause:** The event bubbles up from every animated descendant. If you listen on a parent, you will see one event per child. **Solution:** Call `event.stopPropagation()`, or check `event.target === el`, or attach the listener to the animated element itself. ### Error: The `flip` animation only animates partially **Cause:** `flip` briefly translates the element `+150px` on the Z axis using `perspective(400px)`. A `transform-style: flat` on an ancestor or `overflow: hidden` on a small container can clip or flatten it. **Solution:** Make sure you are using both classes (`animate__animated animate__flip`), and check that the parent does not clip 3D transforms. ### Error: `animate__infinite` ignores my `--animate-repeat` override **Cause:** Intentional. `animate__infinite` sets `animation-iteration-count: infinite` as a literal value; it does not reference the custom property. **Solution:** Use `animate__repeat-1`, `animate__repeat-2`, or `animate__repeat-3` and override `--animate-repeat`. For truly infinite animation, the only option is `animate__infinite`. ### Error: The animation works in Chrome but not in Safari / Firefox **Cause:** Almost always the `prefers-reduced-motion` setting. Safari and Firefox respect the OS setting; if you have "Reduce Motion" enabled system-wide, animations complete in `1ms`. **Solution:** Check your OS motion settings. The behavior is correct and by design. ### Error: Bundler can't find `animate.css` when I `import 'animate.css'` **Cause:** Some bundlers need an explicit file extension or require the file inside the package. **Solution:** Try `import 'animate.css/animate.min.css';` or reference the path from `node_modules/animate.css/animate.min.css`. ### Error: The `hinge` animation falls on top of other content **Cause:** By design — `hinge` ends at `translate3d(0, 700px, 0)` with `opacity: 0`, but the layout still reserves the element's original box. During the 2s animation the falling element may cover whatever is beneath it. **Solution:** Wrap the hinging element in an absolutely positioned container, or remove the element on `animationend`. ### Error: Nothing animates inside Shadow DOM **Cause:** Animate.css is applied as a global stylesheet. Shadow DOM encapsulation isolates styles. **Solution:** Import the stylesheet inside the shadow root, or adopt a `CSSStyleSheet` with `adoptedStyleSheets`. ### Error: My content clipped during `animate__flipInX` **Cause:** `flipInX` uses `perspective(400px)` rotation from `90deg`. Parent containers with `overflow: hidden` or no room for the rotated bounding box can clip the element mid-rotation. **Solution:** Give the container enough space (or temporarily remove `overflow: hidden` during the animation), or pick a gentler animation (`fadeIn`, `slideInDown`). > [!TIP] > For a loading-on-page-load issue (#1856), ensure the `` for animate.css is in `` (blocking render is fine — the file is small), not in ``. This prevents the element from rendering before the animation stylesheet loads. --- ## 12. FAQ **Q: Does animate.css require JavaScript?** No. Adding the classes to an element in HTML is enough. JavaScript is only needed if you want to trigger animations on events, remove them afterwards, or chain them. **Q: Does it work with Tailwind / Bootstrap / Bulma / Foundation?** Yes. The `animate__` prefix was introduced in v4 specifically to avoid class-name collisions. If you are still on v3 (or using `animate.compat.css`) and you see conflicts, switch to v4's prefixed build. **Q: How do I change only one animation's duration without affecting others?** Scope the override: ```css .my-element.animate__bounce { --animate-duration: 500ms; } ``` Or inline: ```html

``` **Q: Can I use animate.css with server-side rendering (Next.js, Nuxt, SvelteKit)?** Yes. The stylesheet is static CSS — it loads the same way your other global styles do. No hydration concerns. **Q: Is there a way to animate route transitions (SPA)?** There is no built-in routing integration, but `animateCSS` from section 4.4 returns a `Promise` that resolves on `animationend`. Use it to sequence "fade out -> change route -> fade in" (see section 7.4). **Q: Why does `bounceIn` finish faster than `fadeIn`?** `bounceIn`, `bounceOut`, `flipOutX`, and `flipOutY` set a custom `animation-duration: calc(var(--animate-duration) * 0.75)` on their class — they are deliberately 25% shorter than the default 1s so the spring feels springy. **Q: What is the difference between `fadeInLeft` and `fadeInLeftBig`?** The `Big` variants translate across the full viewport width (or height). Non-`Big` variants only translate `100%` of the element itself. **Q: Can I cancel an animation partway through?** Yes — remove the `animate__animated` class (or the animation class). The element snaps to its current CSS state immediately. Use the `animationcancel` event to detect this programmatically. **Q: Does animate.css support right-to-left (RTL) languages?** Directional animations (`*Left`, `*Right`) refer to physical directions, not logical ones. If your UI is RTL, `fadeInLeft` still comes from the geometric left. If you need mirror behavior, swap the classes in your RTL stylesheet or use `fadeIn` (non-directional) where possible. **Q: How big is the production build?** `animate.min.css` is roughly 60 KB uncompressed and approximately 9 KB gzipped. If that is too heavy, build a custom version with only the animations you use — see the Admin Guide's Custom Builds section. **Q: Can I chain two animations on the same element?** Not simultaneously — the second class wins whichever sets `animation-name` last. Run them sequentially by listening for `animationend` and swapping classes: ```js el.classList.add('animate__animated', 'animate__fadeIn'); el.addEventListener('animationend', () => { el.classList.remove('animate__fadeIn'); el.classList.add('animate__pulse', 'animate__infinite'); }, { once: true }); ``` **Q: Can I use it in a static email?** Most email clients strip `

An animated element