CSS KeyFrames and CSS Animation property is used to create Tennis Ball Bounce Animation. You can animate the image of tennis ball using this code.
Table of Contents
The Ball Used for CSS Bounce Animation
Following image of tennis ball is used for the animation using CSS.
This article has two main parts, HTML part and the CSS animation part. The code of both is given below. The video is also attached at the end of the article.
HTML Section
The HTML section is pretty simple, It's just a png image of tennis ball that i have used inside the body tag. The Css animation of tennis ball is done using the class 'tennis-ball'.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Tennis Ball Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="tennis-ball.png" class="tennis-ball" alt='tennis ball'>
</body>
</html>
CSS Animation Section
In CSS section, the animation property of CSS is used to animate the tennis ball image. The four second animation is divided into 5 parts. In each part or instance the position property of tennis ball image is changed.
The image is also rotated from 0 deg to 360 deg from one instance to another and vice versa.
The animation repeats itself due to the "infinite" value of animation property. But the repetition is done in alternation due to alternate keyword in animation property.
CSS Code
body
{
padding: 0;
margin: 0;
background-color: #000;
overflow: hidden;
}
.tennis-ball
{
width: 100px;
position: absolute;
animation: tennis 4s linear infinite alternate;
}
@keyframes tennis
{
0%
{
top:0vh;
left: 0px;
transform: rotate(0deg);
}
25%
{
top: 90vh;
left: 300px;
transform: rotate(360deg);
}
50%
{
top: 0vh;
left: 600px;
transform: rotate(0deg);
}
75%
{
top: 90vh;
left: 900px;
transform: rotate(360deg);
}
100%
{
top: 0vh;
left: 1200px;
transform: rotate(0deg);
}
}