Javatpoint Logo
Javatpoint Logo

CSS Bounce Effect

HTML and CSS may be used to create a smooth bounce motion. It will produce enjoyable and desired results.

A <div> in an HTML page with the class = "ball" and a <div> of class = "container" is used in this project:

For programming animation, we'll go to CSS. The ball is now 80px by 80px in size and is positioned in the center of the page using Flexbox. Since the user chooses the ball's size, it is available in any size.

Keyframe Creating - The animations can be completely customized with the help of a CSS keyframe. The name of the animation is simply used after the term @keyframes, for example, smooth bounce ball:

Use the keywords 'from' and 'to' to create the animation's start and finish points within the keyframe:

As far as we can tell, the animation can have starting and ending values. The placement of the ball needs to be changed in order to provide a bouncing effect. Transform enables changing an element's coordinates. Thus, the last keyframe:

The three inputs are the modification of the 3-dimensional axis (x, y, z). The ball will be translated along three-dimensional axes. A translation along the y-axis is required for the ball to go up and down.

Keyframe Running - The @keyframe needs to be executed now that it has been constructed. The following lines of code need to be added to the .ball{} code stated above:

The idea of the animation - The animation specifies a duration of 0.5 seconds and instructs the ball element to utilize the specified keyframe rule bounce. After that, the animation direction changes. then continues to run the animation indefinitely.

However, it does not move back and forth or up and down like a ball that bounces.

By default, animations are set to be smooth. As a result, the animation must start slowly, pick up speed in the middle, and then slow down again towards the end to give the impression that the ball is bouncing.

For that bezier curves are employed to alter animation timings. Therefore, the following code must be added:

The ball then exhibits the effect of bouncing after that.

The complete Code is given below:


Extreme Positions of the Ball:

CSS Bounce Effect

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA