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

FX-Partikel: Grundzustand unsichtbar + will-change gegen Start-Flackern (WebKit)

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

8
src/lib/components/game/BurstFx.svelte
View File

@ -57,11 +57,15 @@
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
background: var(--color); background: var(--color);
/* both = der 0%-Zustand gilt schon vor dem ersten Tick → kein Aufblitzen/Flackern beim Start. */ /* Grundzustand unsichtbar: selbst falls WebKit den backwards-Fill erst spät anwendet,
blitzt nichts auf. `both` setzt dann den 0%-Zustand, die Animation übernimmt. */
opacity: 0;
transform: scale(0);
will-change: transform, opacity;
animation: fly 0.7s ease-out both; animation: fly 0.7s ease-out both;
} }
@keyframes fly { @keyframes fly {
0% { transform: rotate(var(--angle)) translateY(0) scale(0.6); opacity: 1; } 0% { transform: rotate(var(--angle)) translateY(0) scale(0.5); opacity: 1; }
100% { transform: rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(1); opacity: 0; } 100% { transform: rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(1); opacity: 0; }
} }
</style> </style>