<img class="ball" src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/ball.png" alt="ball"width="111" height="111" />

body {
  margin:3em 10%; 
  background:#333;
}
		
.ball {				
  animation-name: ballmove;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;		
  animation-delay:2s;
	animation-fill-mode:forwards;										
}
			
@keyframes ballmove {
    0% {
      transform: translateX(0) rotate(0);
    }				
		20% {
      transform: translateX(-10px) rotate(-0.5turn);
    }
  100% {
    transform: translateX(450px) rotate(2turn);
  }
}