Bouncing Ball Animation

This CSS Reference section displays the code for an example that illustrates an animation of a bouncing ball.

BouncingBall.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .cAnim {
        width:50px;
        height:50px;
        background-color:tomato;
        position:relative;
        border-radius:25px;
        animation: kfMoveUp cubic-bezier(.6, 0, 1, .8) .87s infinite alternate,
          kfMoveLeft linear 2s infinite alternate;
      }

      @keyframes kfMoveUp {
        from {top: 0px;}
        to {top: 350px;}
      }

      @keyframes kfMoveLeft {
        from {left: 0px;}
        to {left: 250px;}
      }
    </style>
  </head>
<body>
  <div style="border:1px solid black;width:300px;height:400px;background-color:lavender;">
    <div class="cAnim"></div>
  </div>
</body>
</html>

Core CSS

Bouncing Ball Animation

BouncingBall.html

Output