fix: remove all transform from stagger/fade animations
Any transform (even transform:none) in animation keyframes with fill-mode creates a containing block that traps position:fixed overlays. Removed transform entirely — fade-in only with opacity.
This commit is contained in:
@@ -132,8 +132,8 @@ a:focus-visible {
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeSlideIn {
|
||||
from { opacity: 0; translate: 0 12px; }
|
||||
to { opacity: 1; translate: none; }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
@@ -147,12 +147,12 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
@keyframes countUp {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-fade-slide-in {
|
||||
animation: fadeSlideIn 0.4s ease-out both;
|
||||
animation: fadeSlideIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
@@ -171,7 +171,7 @@ a:focus-visible {
|
||||
|
||||
/* Stagger children utility */
|
||||
.stagger-children > * {
|
||||
animation: fadeSlideIn 0.4s ease-out both;
|
||||
animation: fadeSlideIn 0.4s ease-out forwards;
|
||||
}
|
||||
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
|
||||
.stagger-children > *:nth-child(2) { animation-delay: 60ms; }
|
||||
|
||||
Reference in New Issue
Block a user