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

body {
	background:#383b3b;
  margin:3em 10%; 
}

.ball{
	animation-name: ballmove;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes ballmove {
	0% {
    transform: translateX(100px) rotate(0);
  }
	20% {
    transform: translateX(-10px) rotate(-0.5turn);
  }
	100% {
    transform: translateX(450px) rotate(2turn);
  }		
}