admin/39948-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made fade more smooth

Browse Source
This commit is contained in:
Dmitri 2026-04-14 15:25:03 +04:00
parent 28b6f8fe71
commit 6eb27fefd1
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/css/main.css
View File

@ -15,6 +15,8 @@
/* Page transition timing - single source of truth */ /* Page transition timing - single source of truth */
:root { :root {
--crossfade-duration: 700ms; --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; opacity: 0;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
-webkit-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) ease-out 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; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
/* Only animate opacity - transform is for GPU layer promotion */ /* Only animate opacity - transform is for GPU layer promotion */
@ -108,8 +110,8 @@
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
-webkit-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) ease-out 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; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
/* Only animate opacity - transform is for GPU layer promotion */ /* Only animate opacity - transform is for GPU layer promotion */