@keyframes animX{  
    0% {left: 0px;}  
    100% {left: 30px;}  
}  
@keyframes animY{  
      0% {top: 0px;}  
    100% {top: 30px;}  
}  
  
#ball {   
    margin-left: 69px;
    margin-top: -3px;
    background-color: #f66;  
    border-radius: 50%;  
    position: absolute;  
    animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;  
}