How to make smooth bounce animation using CSS ?
Last Updated :
29 Aug, 2024
The smooth bounce animation can be done with the help of HTML and CSS. It will generate fun and desired outputs.
For this project, a simple div with class ball is needed in HTML page:
CSS
We will switch to CSS for animation programming. Now, Flexbox is used to have the ball at the middle of the page and make the ball 70px by 70px in size. It can be taken in any size of the user’s choice as it determines the size of the ball.
css
body {
display: flex;
justify-content: center;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
}
Here,
justify-content: center is used to center the ball horizontally.
border-radius : 50% turns the square into a circle.
background-color: #FF5722 turns the circle to orange colour. There are various code notations for colors to be remembered.
Keyframe creating:
Keyframes in CSS animations gives complete control over the animation. Simple use of the keyword @keyframes followed by the name of the animation, i.e, smooth bounce ball:
css
@keyframes smoothbounceball{
statements
}
Within the keyframe, use keywords from and to to make a start and end point for the animation.
css
@keyframes smoothbounceball{
from {/*starting*/}
to {/*ending*/}
}
To our understanding, we can add starting and ending values to the animation. To create a bouncing effect, we need to transform the location of the ball. transform allows to modify co-ordinates of a given element. Hence the final keyframe:
css
@keyframes smoothbounceball{
from { transform: translate3d(0, 0, 0);}
to { transform: translate3d(0, 200px, 0);}
}
Here, translate3d functions takes three inputs, the change in 3-dimensional axis (x, y, z). It will translate the ball in 3-Dimensional axes. If the ball wants to move up and down, the ball needs to translate along the y-axis.
Running the keyframe: Since the @keyframe has been created, now it needs to run. In the above mentioned code of .ball{ }, a following a line has to be added:
css
.ball{
Given statements...
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
The understanding of the animation: The animation tells ball element to use the given keyframe rule bounce and sets the length of the animation of 0.5 seconds. Then at finishing, the animation direction alternates. Then runs the animation an infinite number of times.
But it does not like the ball bounces but moves back and forth, up and down.
Hence, it looks like:
That is because the timing of the animation is off. Animations are set to ease, by default. So, to look like the ball is bouncing, the animation needs to be slow at the start and speeding up in the middle and then finishing slowly.
Hence bezier curve is used to customize animation timings. Therefore the code:
css
.ball{
Given statements..
animation: bounce 0.5s cubic-bezier(0.5, 0.05, 1, 0.5);
}
After this, the ball shows the bouncing effect. Here is the final code:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
animation-iteration-count: infinite;
}
@keyframes bounce {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 200px, 0);
}
}
/* Prefix Support */
ball {
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(0, 200px, 0);
transform: translate3d(0, 200px, 0);
}
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
Output:
Similar Reads
How to make a morph spinner animation using CSS ?
Morphing is the rotating animation of certain objects changing their shape. The changing of shape is called morphing. In this article, we will make a morph spinner that will act as a loading animation by using CSS. This method can also be used to make eye-catching card backgrounds, banners, buttons,
3 min read
How to make border popup animation for buttons using CSS ?
In this article, we will learn how to make border pop animation for buttons for your website. To create the border popup animation, we use CSS Pseudo Elements. A CSS Pseudo elements is a keyword added to a selector that lets you style to a specific part of the selected element. In order to create an
2 min read
How to Create Border Animation using CSS?
Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction.
2 min read
How to create text-fill animation using CSS ?
A text-fill animation using CSS is a visual effect where the content of text gradually fills with a color, gradient, or pattern over time. This animation can create dynamic, eye-catching effects for headings or titles by adjusting properties like background-size, clip-path, or keyframe animations. A
2 min read
How to rotate shape loader animation using CSS ?
A rotating shape loader animation in CSS refers to an animated element, such as a circle or square, that spins continuously to indicate loading or processing. This is achieved using the @keyframes rule and CSS properties like transform: rotate() to create smooth, spinning animations. rotate shape lo
2 min read
How to pause/play animation using CSS ?
CSS helps to animate HTML elements without using JavaScript. You can play and pause the animation applied to HTML elements using animation-play-state property of CSS. The animation-play-state property has 2 values:paused - Pauses an ongoing animation.running - Starts a paused animation (default valu
2 min read
How to Animate Bullets in Lists using CSS ?
In this article, we will see how to animate bullet lists using CSS properties. First, we will create a bullet list using <ol> (or <ul>) and <li> and then we will apply some CSS properties to animate the lists. We will create an animation to increase the bullet point size and also s
2 min read
How to Animate Gradient Background Smoothly Using CSS ?
Animating gradient backgrounds smoothly using CSS means setting a gradient background and using transitions or keyframe animations to create gradual changes in colors, angles, or positions. This technique adds a dynamic and visually attractive effect to enhance the webpage's design. What is Gradient
2 min read
How to create Candle Animation using CSS ?
To create Candle animation, we take the basic approach of Pure CSS., Here we are using some animation techniques like move and rotate to create the Candle more effectively. Approach: First we create a container class. In container class, we create another class named candle-body and in this class, w
3 min read
How to Create Animation Loading Bar using CSS ?
Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s
3 min read