schmop/zahlzerlegung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ambiente-Springen beheben: animation-fill-mode backwards hält 0%-Zustand während delay

Browse Source
This commit is contained in:
schmop 2026-05-31 22:48:09 +02:00
parent 7896803100
commit c1027db388
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/components/home/StageAmbience.svelte
View File

@ -115,7 +115,10 @@
will-change: transform;
}
.float { animation: float var(--dur, 3.6s) ease-in-out infinite alternate; }
/* fill-mode: backwards hält schon während des animation-delay den 0%-Zustand. Ohne das
sitzt das Element verzögert bei transform:none und springt beim Animationsstart auf den
0%-Keyframe — das sichtbare „Springen" in den ersten Sekunden. */
.float { animation: float var(--dur, 3.6s) ease-in-out infinite alternate backwards; }
/* translate3d/translateZ erzwingen eine echte GPU-Compositor-Ebene — WebKit/Safari
rendert 3D-transformierte Elemente flüssig, 2D-Transforms ruckeln dort sonst anfangs. */
@keyframes float {
@ -123,13 +126,13 @@
100% { transform: translate3d(0, -30px, 0) rotate(5deg); }
}
.drift { animation: drift var(--dur, 8s) ease-in-out infinite alternate; }
.drift { animation: drift var(--dur, 8s) ease-in-out infinite alternate backwards; }
@keyframes drift {
from { transform: translate3d(-55px, 0, 0); }
to { transform: translate3d(55px, 0, 0); }
}
.twinkle { animation: twinkle var(--dur, 2.2s) ease-in-out infinite; }
.twinkle { animation: twinkle var(--dur, 2.2s) ease-in-out infinite backwards; }
@keyframes twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.5) translateZ(0); }
50% { opacity: 1; transform: scale(1.35) translateZ(0); }