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; 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 /* translate3d/translateZ erzwingen eine echte GPU-Compositor-Ebene — WebKit/Safari
rendert 3D-transformierte Elemente flüssig, 2D-Transforms ruckeln dort sonst anfangs. */ rendert 3D-transformierte Elemente flüssig, 2D-Transforms ruckeln dort sonst anfangs. */
@keyframes float { @keyframes float {
@ -123,13 +126,13 @@
100% { transform: translate3d(0, -30px, 0) rotate(5deg); } 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 { @keyframes drift {
from { transform: translate3d(-55px, 0, 0); } from { transform: translate3d(-55px, 0, 0); }
to { 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 { @keyframes twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.5) translateZ(0); } 0%, 100% { opacity: 0.25; transform: scale(0.5) translateZ(0); }
50% { opacity: 1; transform: scale(1.35) translateZ(0); } 50% { opacity: 1; transform: scale(1.35) translateZ(0); }