Bounce
Drops into three shrinking bounces like a rubber ball: it stretches as it falls, squashes flat on each landing and comes to rest. The pivot sits on the bottom edge so it squashes into the floor.
Also known as: css bounce animation, bouncing ball animation, bounce keyframes.
Bounce
HTML
<div class="kfa-bounce">Bounce</div>
CSS
.kfa-bounce {
--c: var(--kfa-color, #3b82f6);
font-size: var(--kfa-size, 16px);
display: grid;
place-items: center;
width: 5.5em;
height: 5.5em;
border-radius: 1em;
background: var(--c);
color: #fff;
font-family: system-ui, sans-serif;
font-weight: 700;
box-shadow: 0 0.6em 1.4em -0.6em color-mix(in srgb, var(--c) 70%, transparent);
transform-origin: 50% 100%;
animation: kfa-bounce-hops 1.2s both;
}
@keyframes kfa-bounce-hops {
/* launch, then fall with gravity */
0% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(0.25, 0.8, 0.4, 1); }
16% { transform: translateY(-1.8em) scale(0.98, 1.03); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
30% { transform: translateY(0) scale(0.95, 1.06); animation-timing-function: ease-out; }
/* squash on landing, rebound lower each time */
35% { transform: translateY(0) scale(1.12, 0.88); animation-timing-function: cubic-bezier(0.25, 0.8, 0.4, 1); }
47% { transform: translateY(-0.8em) scale(0.99, 1.02); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
58% { transform: translateY(0) scale(0.98, 1.03); animation-timing-function: ease-out; }
62% { transform: translateY(0) scale(1.06, 0.94); animation-timing-function: cubic-bezier(0.25, 0.8, 0.4, 1); }
70% { transform: translateY(-0.28em) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
78% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
82% { transform: translateY(0) scale(1.03, 0.97); animation-timing-function: ease-in-out; }
90%, 100% { transform: translateY(0) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
.kfa-bounce, .kfa-bounce *, .kfa-bounce::before, .kfa-bounce::after, .kfa-bounce *::before, .kfa-bounce *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--kfa-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--kfa-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.