Attention
Rubber Band Animation
Stretches wide, then narrow, then settles.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.rubber-band {
transform: translate3d(165px, 137px, 0);
width: 150px;
height: 46px;
background: #6366f1;
border-radius: 999px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
animation: rubber-band-anim 900ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes rubber-band-anim {
0% {
transform: translate3d(165px, 137px, 0);
animation-timing-function: ease-in-out;
}
30% {
transform: translate3d(165px, 137px, 0) scale(1.25, 0.75);
animation-timing-function: ease-in-out;
}
40% {
transform: translate3d(165px, 137px, 0) scale(0.75, 1.25);
animation-timing-function: ease-in-out;
}
50% {
transform: translate3d(165px, 137px, 0) scale(1.15, 0.85);
animation-timing-function: ease-in-out;
}
65% {
transform: translate3d(165px, 137px, 0) scale(0.95, 1.05);
animation-timing-function: ease-in-out;
}
75% {
transform: translate3d(165px, 137px, 0) scale(1.05, 0.95);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(165px, 137px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.rubber-band {
animation: none;
transition: none;
}
}Why it is built this way
Scale X and Y move in opposite directions, which conserves apparent volume and is why it looks elastic rather than merely resized. Animating width and height instead would trigger layout on every frame.
What it animates
2 properties across 1 CSS declaration. The bar shows when each one is moving.
transformtransformWhat it costs to run
Scale x and scale y is handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 0.90s across 14 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a button. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — scale x and scale y move over 0.90s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.