How to Create Bounce Animation in CSS: Simple Guide

To create a bounce animation in CSS, use the @keyframes rule to define the bounce movement and apply it with the animation property on an element. The animation typically changes the element's transform: translateY() values to simulate bouncing up and down.

Syntax

The bounce animation uses the @keyframes rule to define the stages of the bounce effect. The animation property applies this animation to an element with settings like duration and iteration count.

• @keyframes bounce: Defines the bounce movement steps.
• 0%, 20%, 50%, 80%, 100%: Key points in the animation timeline.
• transform: translateY(): Moves the element vertically to create the bounce.
• animation: bounce 2s infinite;: Runs the bounce animation every 2 seconds endlessly.

css

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.element {
  animation: bounce 2s infinite;
}

Example

This example shows a red circle that bounces up and down smoothly using CSS animation. The circle moves up by 30 pixels and then settles back, repeating forever.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.bounce-ball {
  width: 100px;
  height: 100px;
  background-color: #e63946;
  border-radius: 50%;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

Output

A red circular ball in the center of the page smoothly moves up and down repeatedly, simulating a bounce effect.

Common Pitfalls

Common mistakes when creating bounce animations include:

• Not defining keyframes properly, causing no visible movement.
• Forgetting to set the animation property on the element.
• Using fixed pixel values without considering responsiveness.
• Not using transform for movement, which can cause layout shifts.

Always use transform: translateY() for smooth, GPU-accelerated animations.

css

@keyframes wrongBounce {
  0%, 100% {
    top: 0;
  }
  50% {
    top: -30px;
  }
}

/* Wrong: Using 'top' can cause layout jumps and poor performance */

.element {
  position: relative;
  animation: wrongBounce 2s infinite;
}

/* Right way: Use transform for smooth animation */

@keyframes rightBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.element {
  animation: rightBounce 2s infinite;
}

Quick Reference

Here is a quick cheat sheet for bounce animation properties:

Property	Description	Example
@keyframes	Defines animation steps	@keyframes bounce { ... }
transform: translateY()	Moves element vertically	transform: translateY(-30px);
animation-name	Name of the keyframes	animation-name: bounce;
animation-duration	How long one cycle lasts	animation-duration: 2s;
animation-iteration-count	How many times to repeat	animation-iteration-count: infinite;
animation-timing-function	Speed curve of animation	animation-timing-function: ease;

Key Takeaways

Use @keyframes with transform: translateY() to create smooth bounce animations.

Apply the animation property with duration and infinite repeat for continuous bounce.

Avoid animating layout properties like top or margin to prevent janky movement.

Test your animation in the browser to ensure smooth and visible bouncing.

Adjust translateY values and timing to customize bounce height and speed.