chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: fade-in animation no longer blocks hover transforms

Browse Source 
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) <noreply@anthropic.com>
This commit was merged in pull request #119.
This commit is contained in:
chihlasm
2026-03-22 23:11:17 +00:00
parent 40044a6a9c
commit 6e01a4d04b
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/index.css
View File

@@ -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; }
}
}