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

Ambiente-Animationen per translate3d auf eigene GPU-Ebene gegen Ruckeln (WebKit/Safari)

Browse Source
This commit is contained in:
schmop 2026-05-31 18:39:36 +02:00
parent d8b4536a11
commit ad1ba740f8
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,21 +116,23 @@
} }
.float { animation: float var(--dur, 3.6s) ease-in-out infinite alternate; } .float { animation: float var(--dur, 3.6s) ease-in-out infinite alternate; }
/* translate3d/translateZ erzwingen eine echte GPU-Compositor-Ebene — WebKit/Safari
rendert 3D-transformierte Elemente flüssig, 2D-Transforms ruckeln dort sonst anfangs. */
@keyframes float { @keyframes float {
0% { transform: translateY(18px) rotate(-5deg); } 0% { transform: translate3d(0, 18px, 0) rotate(-5deg); }
100% { transform: translateY(-30px) 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; }
@keyframes drift { @keyframes drift {
from { transform: translateX(-55px); } from { transform: translate3d(-55px, 0, 0); }
to { transform: translateX(55px); } 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; }
@keyframes twinkle { @keyframes twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.5); } 0%, 100% { opacity: 0.25; transform: scale(0.5) translateZ(0); }
50% { opacity: 1; transform: scale(1.35); } 50% { opacity: 1; transform: scale(1.35) translateZ(0); }
} }
.butterfly { position: absolute; } .butterfly { position: absolute; }