From 9c3c15759a821c969abc230a139d4cdbddc68113 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 21 Feb 2026 16:33:46 -0800 Subject: [PATCH] Fix #1833: document animation-fill-mode requirement for custom CSS usage When using Animate.css keyframe names directly in custom CSS (without the .animate__animated class), animation-fill-mode must be set to forwards/both to retain the final state after the animation ends. The .animate__animated class already sets this via animation-fill-mode: both, but this was not documented for users applying animations manually. --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index c7ae5e378..168be3398 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,18 @@ yarn add animate.css You can find the Animate.css documentation on the [website](https://animate.style/). +## Usage with custom CSS + +When using Animate.css animation names directly in your own CSS (without the `.animate__animated` utility class), remember to set `animation-fill-mode: both` (or `forwards`) so the element retains its final animated state after the animation completes. The `.animate__animated` class already handles this for you. + +```css +#my-element { + animation-name: fadeIn; + animation-duration: 2s; + animation-fill-mode: both; /* keeps the element visible after the animation ends */ +} +``` + ## Accessibility Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.