JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
        
        
    <img src="http://i34.photobucket.com/albums/d101/Lee45276/cube_zpsd418a939.png">
      </div>

CSS

img[src="http://i34.photobucket.com/albums/d101/Lee45276/cube_zpsd418a939.png"] {
    height: 250px;
    width: 250px;
    position: absolute;
    top: -5px;
    left: 360px;
}

#wrap {
    width: 800px;
    height: 1100px;
    padding: 0;
    margin: 0 auto;
    border: 5px solid black; 
}

img[src="http://i34.photobucket.com/albums/d101/Lee45276/cube_zpsd418a939.png"] {
    -webkit-animation: ice_1 5s linear 1;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes ice_1 {
    45% { -webkit-transform: translateY(920px) rotate(180deg) ;} 
    50% { -webkit-transform: translateY(900px) ;} 
    100% { -webkit-transform: translateY(920px);} 
}