Transition

index.html

<div id="outerspace">
<div class="rocket">
<div><!-- rocket --></div>
.rocket
</div>#outerspace
</div>

style.css

 /* initial state */
  #outerspace {
    position: relative;
    height: 400px;
    background: #0c0440 url("https://www.the-art-of-web.com/images/outerspace.jpg");
    color: #fff;
  }
  div.rocket {
    position: absolute;
    bottom: 10px;
    left: 20px;
    -webkit-transition: 3s ease-in;
    -moz-transition: 3s ease-in;
    -o-transition: 3s ease-in;
    transition: 3s ease-in;
  }
  div.rocket div {
    width: 92px;
    height: 215px;
    background: url("https://www.the-art-of-web.com/images/rocket.gif") no-repeat;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
  }

  /* hover final state */
  #outerspace:hover div.rocket {
    -webkit-transform: translate(540px,-200px);
    -moz-transform: translate(540px,-200px);
    -o-transform: translate(540px,-200px);
    -ms-transform: translate(540px,-200px);
    transform: translate(540px,-200px);
  }
  #outerspace:hover div.rocket div {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    transform: rotate(50deg);
  }

transition.markdown

Transition

A Pen by Anand prabhakar on CodePen.

License.