From 4804b086af5fe1d6a2ab1f5d9809fa70c557ddc1 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 21 Feb 2026 16:40:12 -0800 Subject: [PATCH] Fix #1796: document hover + page-load animation conflict and workaround When an element carries both a page-load animation class and a CSS hover animation, the browser restarts the entrance animation after the hover animation ends because changing the animation property resets the cycle. Add a new "Combining page-load and hover animations" gotcha to the best practices docs that explains the root cause and shows how to remove the entrance animation classes via the animationend event so the hover animation can run independently without triggering a restart. Co-Authored-By: Claude Sonnet 4.6 --- docsSource/sections/03-best-practices.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docsSource/sections/03-best-practices.md b/docsSource/sections/03-best-practices.md index b3c821c3d..8797c2ac3 100644 --- a/docsSource/sections/03-best-practices.md +++ b/docsSource/sections/03-best-practices.md @@ -58,3 +58,19 @@ Most of the Animate.css animations will move elements across the screen and migh ### Intervals between repeats Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result. + +### Combining page-load and hover animations + +Applying a page-load animation and a hover animation to the same element can cause an unexpected restart of the entrance animation after the hover animation finishes. This happens because browsers re-evaluate the `animation` property whenever it changes (e.g., when a class is added or removed on hover), which resets the animation cycle. + +The recommended fix is to remove the page-load animation classes with Javascript once the animation is complete, so there is nothing to restart: + +```javascript +const element = document.querySelector('.my-element'); + +element.addEventListener('animationend', () => { + element.classList.remove('animate__animated', 'animate__fadeIn'); +}, {once: true}); +``` + +After removing those classes the hover animation works independently and the entrance animation will not be restarted.