made fade more smooth
This commit is contained in:
parent
28b6f8fe71
commit
6eb27fefd1
@ -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 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user