made fade more smooth

This commit is contained in:
Dmitri 2026-04-14 15:25:03 +04:00
parent 28b6f8fe71
commit 6eb27fefd1

View File

@ -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 */