.ball{
 text-indent:20px;
 width:100px;
 height:100px;
 background-color:green;
 color:white;
 border-radius:50%;
 position:absolute;
 right:0%;
 bottom:0%;
 text-align:center;
 animation:ballmove 8s infinite;
 -webkit-animation:ballmove 8s infinite;
 }

 
 @-webkit-keyframes ballmove{

 0%{
 -webkit-transition:transform 16s;
 -webkit-transform:rotateZ(-360deg);
 top:0%;
 right:93%;
 -webkit-animation-timing-function:ease-in;
 }
 12.5%{
 right:93%;
 top:82%;
 -webkit-animation-timing-function:ease-out;
 }
 25%{
 right:77.5%;
 top:20.5%;
 -webkit-animation-timing-function:ease-in;
 }
 37.5%{
 right:62%;
 top:82%;
 -webkit-animation-timing-function:ease-out;
 }
 50%{
 right:46.5%;
 top:35.87%;
 -webkit-animation-timing-function:ease-in;
 }
 62.5%{
 right:31%;
 top:82%;
 -webkit-animation-timing-function:ease-out;
 }
 75%{
 right:15.5%;
 top:47.4%;
 -webkit-animation-timing-function:ease-in;
 }
 100%{
 right:0%;
 top:82%;
 }
 }
 
 
 @keyframes ballmove{

 0%{
 transition:transform 16s;
 transform:rotateZ(-360deg);
 top:0%;
 right:93%;
 animation-timing-function:ease-in;
 }
 12.5%{
 right:93%;
 top:82%;
 animation-timing-function:ease-out;
 }
 25%{
 right:77.5%;
 top:20.5%;
 animation-timing-function:ease-in;
 }
 37.5%{
 right:62%;
 top:82%;
 animation-timing-function:ease-out;
 }
 50%{
 right:46.5%;
 top:35.87%;
 animation-timing-function:ease-in;
 }
 62.5%{
 right:31%;
 top:82%;
 animation-timing-function:ease-out;
 }
 75%{
 right:15.5%;
 top:47.4%;
 animation-timing-function:ease-in;
 }
 100%{
 right:0%;
 top:82%;
 }
 }