Instant CSS
Tools
Templates
Components
Tailwind Components
Animations
Learn
More
Bounce
Animation
A fun bouncing effect useful for drawing attention.
Reset to Default
HTML
Copy HTML
<div class="bouncer"></div>
CSS
Copy CSS
.bouncer { width: 50px; height: 50px; background-color: #3b82f6; border-radius: 50%; animation: bounce 1s infinite alternate; } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-50px); } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.