Press LIKE. All four panes throw the same twelve particles and ten sparks at the same angles, off one seeded table, so what is left to compare is how much of the parabola each library works out on its own. Three of them land on it exactly. The CSS one settles for two named eases and a keyframe at the apex, which is close enough to read as gravity and short enough to still make sense in a year.
0.00 / 1.15 S
/* Twenty-two of these, each carrying its own physics as inline
vars. The apex stop places x at 42% of its travel as well as y. */
.p {
animation: burst var(--life) linear var(--delay) both,
pop var(--life) linear var(--delay) both;
}
/* translate and rotate, not transform: the browser applies scale
between them, so pop scales the particle and not its path. */
@keyframes burst {
0% { translate: 0 0; rotate: 0deg; opacity: 1;
animation-timing-function: ease-out }
42% { translate: calc(var(--tx) * .42) calc(-1 * var(--peak));
rotate: calc(var(--spin) * .42); opacity: 1;
animation-timing-function: ease-in }
100% { translate: var(--tx) var(--drop);
rotate: var(--spin); opacity: 0 }
}
@keyframes pop {
0% { scale: 0 }
8% { scale: 1.25 }
16%, 42% { scale: 1 }
100% { scale: 0 }
}
/* One timing function per keyframe, so the drift and the spin
ease along with the arc. And ease-out is not gravity:
gravity is a quadratic, this is cubic-bezier(0,0,.58,1). Up to
24px wide of the solved panes, all told.
Closing that gap means cubic-bezier(.333,.667,.667,1), which is
exactly y = 2t - t², plus a wrapper so x can keep its own curve.
Three magic numbers and 22 extra nodes to fix something you have
to measure to find. */It is the only one here you can retune without opening a JavaScript file, and every number in it is in plain sight. Nothing to install, and it only animates movement, size and opacity, so the browser can run the whole burst on its own thread and keep it smooth while JavaScript is busy.
It has no idea what gravity is, so the arc is two named eases either side of a keyframe at the apex, and ease-out is not a quadratic. A keyframe also has one timing function for every property in it, so the sideways drift and the spin ease along with the arc instead of running at a constant rate. Measured against the three solved panes it runs up to 24px wide of them. And every particle has to peak at the same fraction of its own life, because a keyframe percentage cannot be a variable, so lifetime and launch speed stop being independent.
22 nodes · 2 @keyframes · linear pop
Loading engines…