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.
CSS Animation Generator
Build CSS keyframe animations visually. Configure timing, add keyframes, preview live, then copy production-ready CSS.
Animation Properties
Keyframes (2)
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.