JSFiddle - React, Tailwind, and code Playground

by gtbhopale

HTML

<div>

</div>

CSS

div{
	  width: 118.333px;
	  height: 118.333px;
	  background-image: url("http://i.imgur.com/MbT28qN.png");
	  animation: playX 1s steps(6) infinite,
	             playY 3s steps(3) infinite,fly 12s;
	}
  @keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0);
    
  }
  25% {
    transform: translate(120%, 160%) rotate(20deg) scale(1.1);
    
  }
  50% {
    transform: translate(-60%, 260%) rotate(-60deg) scale(1.1);
    
  }
  75% {
    transform: translate(60%, 220%) rotate(-10deg) scale(1.1);
    
  }
  
}

	@keyframes playX {
	  from {background-position-x: 0px;}
	  to {background-position-x: -710px;}
	}

	@keyframes playY {
	  from {background-position-y: 0px;}
	  to {background-position-y: -355px;}
	}