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

fix: eliminate page load blinking by adding animation-fill-mode: both

Browse Source 
All CSS animations starting from opacity:0 were missing backwards
fill-mode, causing elements to render visible then snap to invisible
when the animation started (especially with delays). Changed forwards
to both on all opacity-based animation shorthands and utilities.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-27 11:08:48 +00:00
parent b7a126299a
commit 8769b802c4
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/index.css
View File

@@ -76,12 +76,12 @@
/* font-label removed — migrated to font-mono or font-sans */ /* font-label removed — migrated to font-mono or font-sans */
/* ── Animations ────────────────────────────────── */ /* ── Animations ────────────────────────────────── */
--animate-fade-in: fade-in 200ms ease-out; --animate-fade-in: fade-in 200ms ease-out both;
--animate-fade-in-up: fade-in-up 200ms ease-out; --animate-fade-in-up: fade-in-up 200ms ease-out both;
--animate-slide-in-left: slide-in-from-left 200ms ease-out; --animate-slide-in-left: slide-in-from-left 200ms ease-out;
--animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out; --animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out both;
--animate-scale-in: scale-in 150ms ease-out; --animate-scale-in: scale-in 150ms ease-out both;
--animate-fade: fadeIn 300ms ease forwards; --animate-fade: fadeIn 300ms ease both;
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } to { opacity: 1; } from { opacity: 0; } to { opacity: 1; }
@@ -151,7 +151,7 @@
@utility stagger-item { @utility stagger-item {
opacity: 0; opacity: 0;
animation: fade-in-only 350ms var(--ease-out-smooth) forwards; animation: fade-in-only 350ms var(--ease-out-smooth) both;
animation-delay: calc(var(--stagger-index, 0) * 50ms); animation-delay: calc(var(--stagger-index, 0) * 50ms);
} }
@@ -309,7 +309,7 @@
/* Staggered fade-in helper — uses opacity-only animation /* Staggered fade-in helper — uses opacity-only animation
so it doesn't block hover transforms via fill-mode */ so it doesn't block hover transforms via fill-mode */
.fade-in { .fade-in {
animation: fade-in-only 0.3s ease forwards; animation: fade-in-only 0.3s ease both;
} }
@keyframes fade-in-only { @keyframes fade-in-only {