A classic bouncing ball animation. It's simple, but not easy to get it looking realistic: the physics involved affects the ball in subtle ways. These demos have a few phases: launch, apex, then three decaying bounces, with the ball squashing on every impact and the shadow shrinking as it rises.
0.00 / 2.00 S
@keyframes ball-y {
0% { transform: translateY(0);
animation-timing-function: cubic-bezier(.16,.62,.34,1) }
26% { transform: translateY(-150px);
animation-timing-function: cubic-bezier(.66,.02,.84,.4) }
48% { transform: translateY(0);
animation-timing-function: cubic-bezier(.16,.62,.34,1) }
62% { transform: translateY(-60px) }
/* …74% 82% 88% 92% 95% 100% */
}
.ball { animation: ball-y 2s linear infinite }
.squash { animation: ball-squash 2s linear infinite }
.shadow { animation: ball-shadow 2s linear infinite }Nothing to install, and the compositor keeps it running while the main thread is busy.
Timing is percentages of a total you recompute by hand, and transform is one property, so travel and squash need two nested elements.
9 keyframes · per-frame cubic-bezier
Loading engines…