Skip to content

fix(#7850): decouple animation and transition delay classes via submi… #7855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 2 commits into from
Jun 13, 2026
+97 −0
Merged

fix(#7850): decouple animation and transition delay classes via submi… #7855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8ba509
fix(#7850): decouple animation and transition delay classes via submi…
sahare-mayur-0071 Jun 13, 2026
2fe4ac4
chore: merge upstream main to sync branch
github-actions[bot] Jun 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions submissions/examples/hover-delay-fix-7850/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Hover Delay Fix (#7850)

This submission resolves a critical UX bug where `.ease-delay-*` stagger utilities were unintentionally adding lags to hover interactions.

## The Bug
Previously, `.ease-delay-*` applied both `animation-delay` AND `transition-delay`. Thus, when used to stagger entrance animations (`ease-fade-in`), it would permanently saddle the element with a transition delay, ruining interactive states like `.ease-hover-lift`.

## The Fix
This submission provides CSS overrides that decouple the two properties:
1. `.ease-delay-*` now purely applies `animation-delay` for entrance staggers (transition-delay is reset to 0s).
2. A new suite of `.ease-transition-delay-*` classes was created for explicit transition delays if a developer needs them.

This guarantees smooth hover effects immediately upon interaction, improving the perceived performance of the entire framework.

*Note for Maintainers: Please merge these overrides directly into `core/animations.css` when accepting this PR.*
53 changes: 53 additions & 0 deletions submissions/examples/hover-delay-fix-7850/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EaseMotion CSS - Hover Delay Fix (#7850)</title>
<!-- Link to the local development framework -->
<link rel="stylesheet" href="../../../easemotion.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="ease-bg-surface ease-text-primary ease-flex ease-items-center ease-justify-center ease-h-screen">

<div class="ease-container ease-stack-lg" style="max-width: 800px;">
<div class="ease-text-center">
<h1 class="ease-text-3xl ease-font-bold ease-mb-4 ease-fade-in">Hover Delay Fix Demo</h1>
<p class="ease-text-muted ease-fade-in ease-delay-100">
This demo proves that the <code>.ease-delay-*</code> utility classes no longer interfere with hover transitions.
</p>
</div>

<div class="ease-grid ease-grid-cols-2 ease-gap-8">
<!-- Card 1 -->
<div class="ease-card ease-hover-lift-shadow ease-p-6 ease-rounded-lg ease-bg-white ease-fade-in ease-delay-300">
<h3 class="ease-text-xl ease-font-bold ease-mb-2">Card 1</h3>
<p class="ease-text-sm ease-text-muted">Fades in after 300ms. Hovering now lifts immediately without a 300ms lag.</p>
<div class="ease-mt-4">
<button class="ease-btn ease-btn-primary ease-btn-hover">Hover Me</button>
</div>
</div>

<!-- Card 2 -->
<div class="ease-card ease-hover-lift-shadow ease-p-6 ease-rounded-lg ease-bg-white ease-fade-in ease-delay-600">
<h3 class="ease-text-xl ease-font-bold ease-mb-2">Card 2</h3>
<p class="ease-text-sm ease-text-muted">Fades in after 600ms. Hovering now lifts immediately without a 600ms lag.</p>
<div class="ease-mt-4">
<button class="ease-btn ease-btn-success ease-btn-hover">Hover Me</button>
</div>
</div>
</div>

<div class="ease-mt-8 ease-p-6 ease-bg-neutral ease-rounded-lg ease-fade-in ease-delay-800">
<h3 class="ease-text-lg ease-font-bold ease-mb-2">Explicit Transition Delay</h3>
<p class="ease-text-sm ease-text-muted ease-mb-4">
If you explicitly want a transition delay, use the new dedicated <code>.ease-transition-delay-*</code> classes.
</p>
<button class="ease-btn ease-btn-danger ease-btn-hover ease-transition-delay-500">
Hover Me (500ms Delay)
</button>
</div>
</div>

</body>
</html>
29 changes: 29 additions & 0 deletions submissions/examples/hover-delay-fix-7850/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/* Override core animations.css to remove unwanted transition delays */
.ease-delay-75 { transition-delay: 0s !important; }
.ease-delay-100 { transition-delay: 0s !important; }
.ease-delay-150 { transition-delay: 0s !important; }
.ease-delay-200 { transition-delay: 0s !important; }
.ease-delay-300 { transition-delay: 0s !important; }
.ease-delay-400 { transition-delay: 0s !important; }
.ease-delay-500 { transition-delay: 0s !important; }
.ease-delay-600 { transition-delay: 0s !important; }
.ease-delay-700 { transition-delay: 0s !important; }
.ease-delay-800 { transition-delay: 0s !important; }
.ease-delay-1000 { transition-delay: 0s !important; }

/* Dedicated Transition Delay Helpers */
.ease-transition-delay-75 { transition-delay: 75ms !important; }
.ease-transition-delay-100 { transition-delay: 100ms !important; }
.ease-transition-delay-150 { transition-delay: 150ms !important; }
.ease-transition-delay-200 { transition-delay: 200ms !important; }
.ease-transition-delay-300 { transition-delay: 300ms !important; }
.ease-transition-delay-400 { transition-delay: 400ms !important; }
.ease-transition-delay-500 { transition-delay: 500ms !important; }
.ease-transition-delay-600 { transition-delay: 600ms !important; }
.ease-transition-delay-700 { transition-delay: 700ms !important; }
.ease-transition-delay-800 { transition-delay: 800ms !important; }
.ease-transition-delay-1000 { transition-delay: 1000ms !important; }

body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
Loading