diff --git a/submissions/examples/hover-delay-fix-7850/README.md b/submissions/examples/hover-delay-fix-7850/README.md new file mode 100644 index 000000000..4b63f82d0 --- /dev/null +++ b/submissions/examples/hover-delay-fix-7850/README.md @@ -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.* diff --git a/submissions/examples/hover-delay-fix-7850/demo.html b/submissions/examples/hover-delay-fix-7850/demo.html new file mode 100644 index 000000000..55d34eb29 --- /dev/null +++ b/submissions/examples/hover-delay-fix-7850/demo.html @@ -0,0 +1,53 @@ + + + + + + EaseMotion CSS - Hover Delay Fix (#7850) + + + + + + +
+
+

Hover Delay Fix Demo

+

+ This demo proves that the .ease-delay-* utility classes no longer interfere with hover transitions. +

+
+ +
+ +
+

Card 1

+

Fades in after 300ms. Hovering now lifts immediately without a 300ms lag.

+
+ +
+
+ + +
+

Card 2

+

Fades in after 600ms. Hovering now lifts immediately without a 600ms lag.

+
+ +
+
+
+ +
+

Explicit Transition Delay

+

+ If you explicitly want a transition delay, use the new dedicated .ease-transition-delay-* classes. +

+ +
+
+ + + diff --git a/submissions/examples/hover-delay-fix-7850/style.css b/submissions/examples/hover-delay-fix-7850/style.css new file mode 100644 index 000000000..efd92826c --- /dev/null +++ b/submissions/examples/hover-delay-fix-7850/style.css @@ -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; +}