Ever wanted to add a little bounce to your UI without JavaScript? Let’s walk through how to do it with just HTML and CSS...no fuss, it's a walk in the park.
In this tutorial, you'll learn how to create a smooth bounce animation for any element (text, button, image, etc.) using only HTML and CSS.
Let's jump right into it, shall we?
Steps
1. Start with a basic HTML structure
Let’s say we want to bounce a circle:
<div class="bounce"></div>
2. Style it with CSS
Give it some shape and bounce:
.bounce {
width: 100px;
height: 100px;
background: #00bfff;
border-radius: 50%;
position: relative;
animation: bounce 2s infinite;
}
3. Add the bounce animation
Now for the juicy part:
@keyframes bounce {
0%, 100% {
top: 0;
animation-timing-function: ease-in;
}
50% {
top: 100px;
animation-timing-function: ease-out;
}
}You may be wondering how I arrived at the blocks of code in the @keyframes....worry no more, here's the breakdown:
- 0% and 100%: Element is at the top.
- 50%: Drops down (you can adjust the 150px for a higher or lower bounce).
- ease-in and ease-out: Makes it feel more natural — fast drop, slow rise.
Here’s a quick demo on CodePen (you can plug this into your own HTML file too).
You can also view it in action in my Portfolio.
Bonus Tip
Now what's a tutorial without a bonus tip? I got you, worry less.
If you want the bounce to feel more dramatic, try adding scale or tweaking the duration, thus:
@keyframes bounce {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
}I'm curious to know if you've ever used CSS animations like this before. So if you've got cooler tricks, drop them in the comments. Or let me know what else you'd like to see next!
Thank you for reading! Follow me for more bite-sized tutorials like this.