CSS3 creates web animation to achieve bouncing ball effect

Basic preparation

For this implementation, we need a simple div with the class name ball:

HTML code:

<div class="ball"></div>

We will use Flexbox layout to put the ball in the middle of the page, with a size of 100px * 100px and an orange background color.

CSS code:

body {
display: flex; /* Use Flex layout */
justify-content: center; /* Horizontally center */
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%; /* Turn the square into a circle */
background-color: #FF5722; /* Set the color to orange */
}

Creating Keyframes

Keyframes are used in CSS animations so that we have full control over the animation. Creating a Keyframe style is very simple. We use the keyword @keyframes followed by the name of the animation:

CSS code:

@keyframes nameOfAnimation {
/* code */
}

In this example, we name the keyframe bounce. In Keyframe, use the from and to keywords to specify the CSS styles for the start and end points of the animation.

CSS code:

@keyframes bounce {
from { /* start */ }
to { /* end */ }
}

Simple, isn’t it? As a final step, we can add CSS styles for our start and end points. To create the bounce effect we will simply change the position of the ball. transform allows us to modify the coordinates of a given element. Here is the final keyframe:

CSS code:

@keyframes bounce {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, 200px, 0); }
}

We use transform to translate the ball along the three-dimensional axis. The translate3D function requires three input parameters, namely (x, y, z). Since we want the ball to bounce up and down, we only need to translate along the y-axis. Therefore, the y value of the animation end point (that is, the style in to) becomes 200px.

Run Keyframe

Now that the @keyframe is created, it's time to put it to work! Go back to .ball{} css and add the following line of code:

CSS code:

.ball {
/* ... */
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}

Explain these three lines of code:

Tell the ball element to bounce using our keyframe rules. Set the duration of the animation to complete to .5 seconds.

After completion, the animation is executed in the opposite direction (reversed).

Run the animation an unlimited number of times.

Awesome, so far. This is close to what we want, but not perfect yet:

It doesn't look like a bouncing ball. That's because we didn't set a speed curve for the animation, so it will be set to ease by default. This means that the animation starts slow, speeds up in the middle, and slows down again near the end. Unfortunately, this isn't ideal for a bouncing ball. Luckily, we can use Math to customize this speed curve!

Without going into too much detail, you can use bezier curves to specify custom animation timings. Here is the attached code:

CSS code:

.ball {
/* ... */
animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
}

Of course this is the simplest animation effect created with CSS Animations and Keyframes.

Summarize

The above is what I introduced to you about how to use CSS3 to create web animations to achieve bouncing ball effects. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!