From 8769b802c422ad2b394c7d9b2811f54c244f8769 Mon Sep 17 00:00:00 2001 From: chihlasm Date: Fri, 27 Mar 2026 11:08:48 +0000 Subject: [PATCH] fix: eliminate page load blinking by adding animation-fill-mode: both 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) --- frontend/src/index.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 14daec72..06749d8b 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -76,12 +76,12 @@ /* font-label removed — migrated to font-mono or font-sans */ /* ── Animations ────────────────────────────────── */ - --animate-fade-in: fade-in 200ms ease-out; - --animate-fade-in-up: fade-in-up 200ms ease-out; + --animate-fade-in: fade-in 200ms ease-out both; + --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-bottom: slide-in-from-bottom 200ms ease-out; - --animate-scale-in: scale-in 150ms ease-out; - --animate-fade: fadeIn 300ms ease forwards; + --animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out both; + --animate-scale-in: scale-in 150ms ease-out both; + --animate-fade: fadeIn 300ms ease both; @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } @@ -151,7 +151,7 @@ @utility stagger-item { 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); } @@ -309,7 +309,7 @@ /* Staggered fade-in helper — uses opacity-only animation so it doesn't block hover transforms via fill-mode */ .fade-in { - animation: fade-in-only 0.3s ease forwards; + animation: fade-in-only 0.3s ease both; } @keyframes fade-in-only {