From c1027db3884fe7ab1283a2d40a167eb4d5303563 Mon Sep 17 00:00:00 2001 From: schmop Date: Sun, 31 May 2026 22:48:09 +0200 Subject: [PATCH] =?UTF-8?q?Ambiente-Springen=20beheben:=20animation-fill-m?= =?UTF-8?q?ode=20backwards=20h=C3=A4lt=200%-Zustand=20w=C3=A4hrend=20delay?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/components/home/StageAmbience.svelte | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/components/home/StageAmbience.svelte b/src/lib/components/home/StageAmbience.svelte index bd6f201..2c98624 100644 --- a/src/lib/components/home/StageAmbience.svelte +++ b/src/lib/components/home/StageAmbience.svelte @@ -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); }