Animation How to - Create animation to get the ball to bounce

Question

We would like to know how to create animation to get the ball to bounce.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.field {<!-- ww w.j a v a  2 s . c  o m-->
  height: 200px;
  position: relative;
}

.football {
  height: 50px;
  width: 50px;
  background-image:url('http://www.java2s.com/style/download.png');
  top: 100%;
  left: 40%;
  position: absolute;
  -webkit-animation: football 8s linear infinite, football .1s linear 50s
    infinite, football_up_down 1s linear infinite;
  animation: football 8s linear infinite, football .1s linear 50s infinite,
    football_up_down 1s linear infinite;
}

@-webkit-keyframes football_up_down { 
  0% {transform: rotate(180deg);top: 100%}
  50%{transform:rotate(360deg);top:30%;}
  100%{transform:rotate(540deg);top:100%}
}
@keyframes football_up_down { 
   0% {transform: rotate(180deg);top: 100%}
   50%{transform:rotate(360deg);top:30%;}
   100%{transform:rotate(540deg);top:100%}
}
</style>
</head>
<body>
  <div class="field">
    <div class="football"></div>
    <div>
</body>
</html>

The code above is rendered as follows: