Processed in your browser. Your data never leaves your device.

CSS Bounce Animation Generator

Design playful CSS bounce animations with adjustable height, speed, and iteration count. See a live preview as you tweak settings, then copy the @keyframes code directly into your stylesheet. Everything runs locally in your browser.

← Back to tools

CSS Animation Generator

Build CSS keyframe animations visually. Configure timing, add keyframes, preview live, then copy production-ready CSS.

Preview

Animation Properties

Name

Duration (s)

Timing Function

Delay (s)

Iterations

Direction

Fill Mode

Keyframes (2)

0%25%50%75%100%

Percent

Translate X

Translate Y

Scale

Rotate

deg

Opacity0%

Skew X

deg

Skew Y

deg

CSS Output

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    transform: none;
  }
}

.animated-element {
  animation: myAnimation 0.6s ease 0s 1 normal both;
}

Presets

About CSS Animations

CSS animations allow elements to transition between styles over time using @keyframes rules and the animation shorthand property.

@keyframes define the animation steps. Each keyframe specifies CSS properties at a given percentage (0% = start, 100% = end).

Duration controls how long one cycle takes. Delay sets time before the animation starts.

Timing function controls acceleration: ease starts slow, speeds up, then slows; linear is constant speed.

Fill mode determines styles before/after animation: forwards keeps the final state, both applies in both directions.

Direction: alternate reverses every other cycle, creating smooth back-and-forth effects. Use with infinite iteration count for looping animations.

Performance tip: animate transform and opacity for best performance — they run on the GPU compositor and don't trigger layout recalculations.

What is a CSS bounce animation?

A CSS bounce animation simulates a physical bouncing motion by alternating an element's vertical position using @keyframes and transform: translateY(). Multi-step keyframes at percentages like 0%, 40%, 60%, and 100% create the characteristic deceleration and rebound effect that mimics real-world physics.

Common use cases

Bounce animations are popular for call-to-action buttons, scroll-down indicators, notification badges, and attention-grabbing icons. They add personality and energy to a page, but should be used sparingly to avoid distracting users from primary content.

Frequently Asked Questions

How do I create an infinite bounce animation in CSS?

Set animation-iteration-count to infinite (or use the shorthand 'animation: bounce 1s infinite'). The element will continue bouncing until the animation is removed or paused.

Why does my bounce animation look unnatural?

Use a custom cubic-bezier easing or add intermediate keyframe steps with smaller translate values to simulate deceleration. The default 'ease' timing function often lacks the acceleration curve needed for realistic bounce physics.

Related Generate Tools

Tˢ

Text Shadow Generator

Design CSS text shadows visually with multiple layers, presets, and live preview

TBL

Markdown Table Generator

Build Markdown tables visually with an interactive editor, CSV import, and alignment controls