156 views
How to Make Smooth Bounce Animation Using CSS
To create a smooth bounce animation using CSS, you can utilize keyframes and CSS transitions. Here’s an example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
position: relative;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { top: 0; }
50% { top: 200px; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>In this example, we have a .box class representing the element that will bounce. The animation is defined using @keyframes where we specify the keyframe percentages and the desired CSS properties at each keyframe. The bounce animation is set to run for 2 seconds and repeat infinitely using the infinite value.
In this case, the animation moves the box element vertically by changing the top position property. The box starts at the top (0%) and moves to a higher position (50%) and then returns back to the top (100%).
Feel free to adjust the values and styles to achieve the desired smooth bounce animation.