From 6eb27fefd15e73561ff406e0bc058d78148129c8 Mon Sep 17 00:00:00 2001 From: Dmitri Date: Tue, 14 Apr 2026 15:25:03 +0400 Subject: [PATCH] made fade more smooth --- frontend/src/css/main.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/css/main.css b/frontend/src/css/main.css index 6c6c382..68e001e 100644 --- a/frontend/src/css/main.css +++ b/frontend/src/css/main.css @@ -15,6 +15,8 @@ /* Page transition timing - single source of truth */ :root { --crossfade-duration: 700ms; + /* Smooth easing: slow start, gentle acceleration, soft landing */ + --crossfade-easing: cubic-bezier(0.4, 0, 0.2, 1); } @@ -95,8 +97,8 @@ opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); - -webkit-animation: page-crossfade-in var(--crossfade-duration, 700ms) ease-out forwards; - animation: page-crossfade-in var(--crossfade-duration, 700ms) ease-out forwards; + -webkit-animation: page-crossfade-in var(--crossfade-duration, 700ms) var(--crossfade-easing, cubic-bezier(0.4, 0, 0.2, 1)) forwards; + animation: page-crossfade-in var(--crossfade-duration, 700ms) var(--crossfade-easing, cubic-bezier(0.4, 0, 0.2, 1)) forwards; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Only animate opacity - transform is for GPU layer promotion */ @@ -108,8 +110,8 @@ opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); - -webkit-animation: page-crossfade-out var(--crossfade-duration, 700ms) ease-out forwards; - animation: page-crossfade-out var(--crossfade-duration, 700ms) ease-out forwards; + -webkit-animation: page-crossfade-out var(--crossfade-duration, 700ms) var(--crossfade-easing, cubic-bezier(0.4, 0, 0.2, 1)) forwards; + animation: page-crossfade-out var(--crossfade-duration, 700ms) var(--crossfade-easing, cubic-bezier(0.4, 0, 0.2, 1)) forwards; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Only animate opacity - transform is for GPU layer promotion */