GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS Bounce Animations — One Line, Copy-Paste

· Godrich · 9 items · 19 min read

FeedbackSCSSCSS onlyHoverCTA

A CSS bounce animation makes an element squash, overshoot, and spring back instead of snapping into place, the way a cartoon character lands a jump.

Fuwafuwa floaty motion01 onomatopoeia-motion-fuwafuwa-float Poyon bounce02 onomatopoeia-motion-poyon-bounce Purupuru jelly wobble03 onomatopoeia-motion-purupuru-jelly Yurayura sway04 onomatopoeia-motion-yurayura-sway Kurukuru spin05 onomatopoeia-motion-kurukuru-spin Pyonpyon hop06 onomatopoeia-motion-pyonpyon-hop Gunya blob morph07 onomatopoeia-motion-gunya-blob Kira sparkle flash08 onomatopoeia-motion-kira-sparkle Nuru smooth glide09 onomatopoeia-motion-nuru-smooth

Auto-plays · click a tile to jump to its section · all nine in one zip

These nine aren't ordered alphabetically; they follow what a single interactive element is doing on the screen. 01 just keeps existing, breathing gently in a corner. 02 and 03 both read as eager for a touch, though only one of them needs it: 02 stays still until a cursor actually lands on it and snaps back like a squeezed toy, while 03 keeps quivering on its own the whole time, as if it's still waiting. 04 through 06 sit in the background doing their job without needing a click: swaying, spinning, hopping. 07 and 08 are decoration and reward, a shape that keeps reshaping itself and a badge that keeps catching light. 09 hands the visitor off to whatever comes next, and all nine take their names from Japanese sound-effect words for exactly this kind of springy motion. Skim the table for duration and trigger, then open any numbered section below for the real code. Add paper to the pop and the confetti celebration effects throw the party, and when a small gesture has to point the way, the CSS arrow animations show the direction.

Class What moves Duration Trigger
.o-float translateY + rotate 2.8s always-on loop
.o-poyon scale 550ms hover / focus, once
.o-puru horizontal / vertical scale 900ms always-on loop
.o-yura rotate 2.4s always-on loop
.o-kuru rotate 1.6s always-on loop
.o-pyon translateY + scale 900ms always-on loop
.o-gunya border-radius 3.2s always-on loop
.o-kira opacity + scale 1.8s always-on loop
.o-nuru translateX + scale 700ms hover / focus, once

01Fuwafuwa floaty motion

What you see

Add .o-float to a badge and it slowly drifts up about 14 pixels while tilting a few degrees, then eases back down, on a loop that never fully stops — like it's breathing.

Fuwafuwa floaty motion
Open in a new tab

01 · Fuwafuwa floaty motion — Measured area 3.606% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateYrotate 3deg2.8s

How it works

It suits anything that needs to keep announcing itself in a corner of the screen without ever asking for a click, such as a new-arrival badge or an onboarding arrow.

$duration: 2.8s;
$easing: ease-in-out;

.o-float {
  animation: o-float $duration $easing infinite;
}

@keyframes o-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-3deg); }
}

02Poyon bounce

Where a css bounce animation on hover fits

.o-poyon only moves once a visitor's mouse or keyboard focus lands on it: the button shrinks in first, then overshoots past its resting size before settling, all inside one 550ms elastic curve.

Poyon bounce
Open in a new tab

02 · Poyon bounce — Measured area 5.788% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale overshootelastic550ms

How to wire it up

That squeeze-then-spring shape is what makes an add-to-cart or a like button feel like it's reacting to being pressed rather than just registering a click.

$duration: 550ms;
$easing: cubic-bezier(.34, 1.56, .64, 1);

.btn.o-poyon:hover,
.btn.o-poyon:focus-visible { animation: o-poyon $duration $easing 1; }

@keyframes o-poyon {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(.84, 1.09); }
  55%  { transform: scale(1.20, .89); }
  75%  { transform: scale(.94, 1.03); }
  100% { transform: scale(1, 1); }
}

03Purupuru jelly wobble

What moves

.o-puru never stops: it nudges horizontal and vertical scale a few percent apart in opposite directions, so a wishlist heart or a notification bell keeps trembling just enough to catch the eye without ever changing size overall.

Purupuru jelly wobble
Open in a new tab

03 · Purupuru jelly wobble — Measured area 0.772% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale(1.07, .94)어긋난 위상900ms

The core of it

It's built for icons that are asking for a tap, not ones only reporting a status.

$duration: 900ms;
$easing: ease-in-out;

.o-puru {
  animation: o-puru $duration $easing infinite;
}

@keyframes o-puru {
  0%, 100% { transform: scale(1, 1); }
  25%      { transform: scale(1.07, .94); }
  50%      { transform: scale(1, 1.07); }
  75%      { transform: scale(.93, 1); }
}

04Yurayura sway

The moment it fires

.o-yura pins its transform-origin to the top edge and rotates the whole element a few degrees left, then right, over 2.4 slow seconds — the way a paper tag actually swings when it's hanging from a string.

Yurayura sway
Open in a new tab

04 · Yurayura sway — Measured area 1.628% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotatetransform-origin: top2.4s

The idea behind it

It reads best on anything drawn as literally dangling from something: a price tag, a bell, a banner accent.

$duration: 2.4s;
$easing: ease-in-out;

.o-yura {
  animation: o-yura $duration $easing infinite;
  transform-origin: top center;
}

@keyframes o-yura {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

05Kurukuru spin

What the user notices

.o-kuru still turns a full 360 degrees like any spinner, but it passes through 230 and 330 degrees at uneven points along the timeline instead of a flat linear sweep, so the rotation carries a small hitch instead of a perfectly even motor spin.

Kurukuru spin
Open in a new tab

05 · Kurukuru spin — Measured area 0.403% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotate 360deg구간별 easing1.6s

Why it is done this way

That one-beat catch is what separates a refresh or sync icon from a plain loading wheel.

$duration: 1.6s;
$easing: cubic-bezier(.65, 0, .35, 1);

.o-kuru {
  animation: o-kuru $duration $easing infinite;
}

@keyframes o-kuru {
  0%   { transform: rotate(0deg); }
  55%  { transform: rotate(230deg); }
  80%  { transform: rotate(330deg); }
  100% { transform: rotate(360deg); }
}

06Pyonpyon hop

Where this shows up

.o-pyon squashes its vertical scale flat right before takeoff and right before landing, then stretches taller at the peak of a 16px jump, borrowing the timing a real hop needs to look springy instead of just sliding up and down.

Pyonpyon hop
Open in a new tab

06 · Pyonpyon hop — Measured area 5.925% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateY+scale착지 스쿼시900ms

Worth noting

A "load more" arrow or a scroll hint gets its bounce from exactly that squash-and-stretch pair.

$duration: 900ms;
$easing: ease-in-out;

.o-pyon {
  animation: o-pyon $duration $easing infinite;
}

@keyframes o-pyon {
  0%, 100% { transform: translateY(0)     scale(1, 1); }
  10%      { transform: translateY(2px)   scale(1.11, .9); }
  40%      { transform: translateY(-16px) scale(.93, 1.08); }
  70%      { transform: translateY(2px)   scale(1.11, .9); }
  85%      { transform: translateY(0)     scale(1.02, 1.03); }
}

07Gunya blob morph

What happens on screen

.o-gunya changes all four corners of border-radius on their own schedule inside one keyframes block, so a background shape keeps reshaping into a new blob every third of its 3.2-second loop instead of holding one fixed curve.

Gunya blob morph
Open in a new tab

07 · Gunya blob morph — Measured area 1.768% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

border-radius 4분할비대칭 keyframes3.2s

The key property

It's built to sit behind something else, decorating a hero section or a feature card without asking to be looked at directly.

$duration: 3.2s;
$easing: ease-in-out;

.o-gunya {
  animation: o-gunya $duration $easing infinite;
}

@keyframes o-gunya {
  0%, 100% { border-radius: 50% 63% 68% 63% / 50% 37% 32% 37%; transform: rotate(0deg); }
  20%      { border-radius: 67% 66% 56% 42% / 33% 34% 44% 58%; transform: rotate(5deg); }
  45%      { border-radius: 56% 42% 33% 34% / 44% 58% 67% 66%; transform: rotate(2deg); }
  70%      { border-radius: 33% 34% 44% 58% / 67% 66% 56% 42%; transform: rotate(-5deg); }
  95%      { border-radius: 44% 58% 67% 66% / 56% 42% 33% 34%; transform: rotate(-2deg); }
}

08Kira sparkle flash

What it looks like

.o-kira flashes two small dots built from ::before and ::after, one running 0.4 seconds behind the other, so a badge catches light twice per loop instead of blinking once as a whole.

Kira sparkle flash
Open in a new tab

08 · Kira sparkle flash — Measured area 0.399% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale+opacity::before/::after1.8s

What to read in the code

A "recommended" or premium badge leans on that stagger to read as a glint rather than a warning flash.

$duration: 1.8s;
$easing: ease-in-out;

.badge.o-kira::before { animation: o-kira $duration $easing infinite; }
.badge.o-kira::after  { animation: o-kira $duration $easing infinite; animation-delay: .4s; }

@keyframes o-kira {
  0%, 45%, 100% { opacity: 0; transform: scale(.4); }
  62%           { opacity: 1; transform: scale(1.3); }
  78%           { opacity: 0; transform: scale(.6); }
}

09Nuru smooth glide

When to use it

.o-nuru waits for a hover or a keyboard focus, then slides an arrow 28px sideways while it grows slightly, on a curve close to ease-out-expo that decelerates hard right at the end.

Nuru smooth glide
Open in a new tab

09 · Nuru smooth glide — Measured area 0.172% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateXcubic-bezier(.16, 1, .3, 1)700ms

How it is built

Next to the spring and squash of the other eight, this one is the deliberately smooth outlier, built for a "learn more" link handing someone off to the next screen.

$duration: 700ms;
$easing: cubic-bezier(.16, 1, .3, 1);

.link.o-nuru:hover .link__arrow,
.link.o-nuru:focus-visible .link__arrow { animation: o-nuru $duration $easing 1; }

@keyframes o-nuru {
  0%   { transform: translateX(0)    scale(1); }
  100% { transform: translateX(28px) scale(1.15); }
}

Where the hover trigger quietly breaks in production

What goes wrong

Items 02 and 09 are the only two of these nine that wait for a hover or a keyboard focus instead of looping by themselves, and both carry a second, demo-only rule alongside the real one: a .is-demo class that forces the same shape to replay every two seconds so this page has something to show without anyone touching it. That .is-demo rule and the real :hover/:focus-visible rule share the exact same specificity — the same number of classes each — so nothing about selector weight decides which one plays; only the order the two rules are written in the stylesheet does. Both files list the hover rule first and the .is-demo rule second on purpose, which is why moving your own mouse over this page still shows the correct animation: the cascade always keeps whichever matching rule was declared later.

How to avoid it

The blur that appears once a wave crosses its threshold is guarded by the same scaling rule in the crayon landing kit, where sketch lines must not smudge.

Paste this CSS into a real project without deleting is-demo from the markup, though, and that same tie-break turns against you — the class is still sitting there, its rule is still declared second, and the button or link keeps replaying a two-second loop instead of springing once when a visitor actually hovers it. Deleting is-demo from the element's class list is the entire fix; nothing in the CSS itself needs to change once that one class is gone. Both the vanilla and React folders in the zip below open with the password kxj6u9k6, printed here as an ordinary word inside this sentence instead of a box, so it only turns up if the paragraph gets read.

Variants worth trying

Variant Changed value Feel
Shorter nuru glide Item 09's translateX cut from 28px to 14px with scale dropped Matches this item's very first build, which measured 0.06% cumulative area — just under this site's 0.08% visibility floor — so the motion barely registered at all
Snappier poyon Item 02's $duration cut from 550ms to 300ms The squeeze-then-overshoot compresses into something closer to a flicker than a bounce, even though the elastic curve's shape stays identical
Calmer kuru Item 05's cubic-bezier(.65, 0, .35, 1) swapped for plain linear The rotation loses its one-beat catch and turns into an ordinary loading-wheel spin

Accessibility

What reduced motion leaves

All nine — item 05's css wobble animation included — switch off under prefers-reduced-motion: reduce, but what's left standing depends on the item. For 01, 03, 04, 05, 06, and 07, nothing of value disappears — a badge, a heart, a tag, an icon, a hint, and a blob each just hold their resting shape instead of moving through it, since none of them were carrying information only the motion could give. Item 08's two flashing dots vanish the same way, leaving the "recommended" text on its badge exactly as readable as always.

What else to check

Items 02 and 09 lose their flourish but keep their function: with the animation gone, the add-to-cart button still presses and the "learn more" link still moves the page, because both are a real <button> and a real <a> underneath, not a div standing in for one. For a wider set of always-on loop motions — float, spin, pulse — that skip the hover step entirely, 9 CSS Keyframe Animations covers the same transform-and-opacity toolkit with a completely different set of keyframes. Everything else this site has published under the same one-line, copy-paste idea sits in the CSS category hub.

FAQ

Does a css jelly animation need JavaScript?

No — all nine run on CSS alone: animation for the seven that loop by themselves, plus :hover and :focus-visible for the two that wait on a cursor or keyboard focus. The zip's vanilla folder ships plain .css, already compiled from the Sass shown throughout this post.

Which of these still work on a phone with no mouse?

The seven always-on loops — float, jelly, sway, spin, hop, blob, and sparkle — play the same whether or not anyone ever touches the screen, since nothing about them depends on a pointer. The two hover-triggered ones, poyon and nuru, only fire on a phone if that browser happens to simulate :hover after a tap, which isn't consistent across touch browsers, so treat those two as desktop-first.

What's different about the React version in the zip?

The components take duration, easing, and color as props and forward them as CSS custom properties instead of Sass variables, so retuning a bounce no longer means recompiling anything. For poyon and nuru, the two hover-triggered items, the React version carries no is-demo class or extra state at all — just a plain :hover/:focus-visible rule inside a CSS module, the same trigger left standing once the trap section above strips the demo class away. To press that very texture onto a button, the CSS button animations are the first look.

Enter the archive password

The password is inside this article. You will find it as you read.