FX-Partikel: Grundzustand unsichtbar + will-change gegen Start-Flackern (WebKit)
This commit is contained in:
parent
dd06c6fe4f
commit
d8b4536a11
|
|
@ -57,11 +57,15 @@
|
|||
position: absolute;
|
||||
border-radius: 50%;
|
||||
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;
|
||||
}
|
||||
@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; }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user