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