From 6e01a4d04b1e2a1a6d7c430b002bad24ea3878ea Mon Sep 17 00:00:00 2001 From: chihlasm Date: Sun, 22 Mar 2026 23:11:17 +0000 Subject: [PATCH] fix: fade-in animation no longer blocks hover transforms The fadeIn keyframe included transform: translateY(0) with fill-mode: forwards, which permanently overrode hover translateY transitions. Replaced with opacity-only animation so card bounce hover works correctly. Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/index.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 2094d3fd..de5b3d56 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -151,7 +151,7 @@ @utility stagger-item { opacity: 0; - animation: fadeIn 350ms var(--ease-out-smooth) forwards; + animation: fade-in-only 350ms var(--ease-out-smooth) forwards; animation-delay: calc(var(--stagger-index, 0) * 50ms); } @@ -306,9 +306,15 @@ } } - /* Staggered fade-in helper */ + /* Staggered fade-in helper — uses opacity-only animation + so it doesn't block hover transforms via fill-mode */ .fade-in { - animation: fadeIn 0.3s ease forwards; + animation: fade-in-only 0.3s ease forwards; + } + + @keyframes fade-in-only { + from { opacity: 0; } + to { opacity: 1; } } }