How to achieve bouncing ball animation effect with css? Implementation example of bouncing ball animation

How to achieve bouncing ball animation effect in css? This article will introduce you to how to achieve the bouncing ball animation effect in CSS through code examples. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Define animation keyframes

For this animation, we will use two keyframes - one to translate the ball horizontally at a constant speed, and another to apply roughly Parabolic vertical bouncing motion. It is possible to combine horizontal and vertical translation into a single keyframe, but this will not work for the effect we are after.

Horizontal movement can be easily achieved using the following keyframe:

 @-webkit-keyframes travel {
    from {              }
    to   { left: 640px; }
  }
  @keyframes travel {
    from {              }
    to   { left: 640px; }
  }

This keyframe will be referenced later using the specified name "travel" and linear (transformation timing function) will be used to apply the key Frame, the function changes direction with each iteration.

For the vertical bounce animation, we're going to take advantage of the ease-in and fade-out timing features to simulate the effects of gravity fields:

 @-webkit-keyframes bounce {
    from, to  {
      bottom: 0;
      -webkit-animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      -webkit-animation-timing-function: ease-in;
    }
  }
  @keyframes bounce {
    from, to  {
      botttom: 0;
      animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      animation-timing-function: ease-in;
    }
  }

This keyframe has been named "bounce" to For future reference.

Combining these two keyframes will move our 'ball' 640 pixels horizontally and 220 pixels vertically. Of course, these values ​​need to be adjusted to fit the size of the "stage".

2. Set the stage for animation

As usual, we first set up a "stage" in which to execute the animation. In this case, a simple DIV with dimensions 660 x 240 pixels. Having the width be 100% would be nice, but placing some elements without knowing the exact pixel width is difficult.

#stage {
    position: relative;
    margin: 1em auto;
    width: 660px;
    height: 240px;
    border: 2px solid #666;
    background: #cff;
  }

At this stage, we will set up a DIV element that moves back and forth horizontally, and within it a DIV representing the "ball" that bounces up and down:

#traveler {
    position: absolute;
    width: 20px;
    height: 240px;
    -webkit-animation-name: travel;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 4.8s;
    animation-name: travel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4.8s;
  }
  #bouncer {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    -webkit-animation-name: bounce;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4.2s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-duration: 4.2s;
  }

So the size of the 'ball' is 20 x 20 pixels, rounded corners.

3. Set the ball movement

We have completed some simple HTML tags:

<div id="stage">
   <div id="traveler">
       <div id="bouncer"><!-- --></div>
   </div>
</div>

If your browser supports it, the animation will automatically Launch and continue indefinitely in the following box (or #stage):

## We added an extra element and some styling to highlight the x and y components of the animation, no JavaScript required, the rest of the code is exactly as shown.

CSS: bounce-animation.css (https://www.the-art-of-web.com/bounce-animation.css)

You’re done!

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to achieve bouncing ball animation effect with css? Implementation example of bouncing ball animation. For more information, please follow other related articles on the PHP Chinese website!