<div>
  <figure id="rocketship">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tintin-rocketship.png"  >
  </figure>
</div>
@keyframes circle {
  to { transform: rotate(-1turn); }
}
@keyframes updown {
  to { transform: translateX(200px); }
}

html {  height: 100%; }
body { margin: 0; background: #000;  min-height: 100%; }
div { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-moon_1.jpg);
  background-color: #000; 
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  height: 100vh;
  position: relative;
}
#rocketship { 
  position: absolute;
  width: 10%; 
  height: 40%;
  top: 0; left: 50%; bottom: 0; right: 0;
  margin: auto;
  position: absolute;
  display: block;
  transform-origin: -200% center;
  animation: circle 4s infinite linear;

}
#rocketship img { width: 100%; height: auto;
  transform-origin: center top;
animation: updown 2s infinite alternate ease-in-out;
  margin-top: 10%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js