Merge PR animate-css#1913: Fix animate-css#1856: Bug on page loading (conflicts resolved: prefer PR changes)

Author: friuns

README.md

@@ -24,18 +24,21 @@ yarn add animate.css
 
 You can find the Animate.css documentation on the [website](https://animate.style/).
 
-## Usage with custom CSS
+## Using with JavaScript Libraries
 
-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.
+When using Animate.css with scroll-triggered JavaScript libraries (such as [wow.js](https://wowjs.uk/), [ScrollReveal](https://scrollrevealjs.org/), or [AOS](https://michalsnik.github.io/aos/)), animations may appear to restart on every page load or when an element re-enters the viewport. This is expected CSS animation behavior: whenever an animation class is removed from an element and then re-added, the animation plays again from the start.
 
-```css
-#my-element {
-  animation-name: fadeIn;
-  animation-duration: 2s;
-  animation-fill-mode: both; /* keeps the element visible after the animation ends */
-}
+To run an animation only **once**, remove the animation classes after the animation ends using the `animationend` event:
+
+```javascript
+const element = document.querySelector('.animate__animated.animate__bounceIn');
+element.addEventListener('animationend', () => {
+  element.classList.remove('animate__animated', 'animate__bounceIn');
+}, { once: true });
 ```
 
+If you are using wow.js specifically, you can prevent it from re-triggering animations on elements already visible in the viewport by initialising it with the `resetAnimation` option set to `false` (if supported by your version), or by removing the animation class on `animationend` as shown above.
+
 ## 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.