1312 vs standards.next

<style>
  #decepticon {
    display: block;
    margin: 0 0 20px;
    -webkit-transition: all .2s ease-in-out;
  }
  #decepticon:hover {
    cursor: pointer;
    opacity: 0.9;
  }
  #decepticon:active {
    opacity: 0.5;
  }
  #autobot {
    position: relative;
    margin: 0 0 20px;
    border: 0 solid #fff;
    border-radius: 0;
  }
  #autobot.transform_and_roll_out {
    -webkit-animation: transform 1s 1 linear, and_roll_out 5s 1 ease-in;
    -webkit-animation-fill-mode: forwards;
  }
  @-webkit-keyframes transform {
    0% {
      border-width: 0;
      border-radius: 0;
    }
    100% {
      border-width: 30px;
      border-radius: 100px;
      background: #fff;
    }
  }
  @-webkit-keyframes and_roll_out {
    0% {
       -webkit-transform: rotate(0deg);
       left: 0;
    }
    20% {
      -webkit-transform: rotate(0deg);
      left: 0;
    }
    100% {
      -webkit-transform: rotate(720deg);
      left: 1200px;
    }
  }
</style>

<script>
  document.getElementById('decepticon').onclick = function() {
      document.getElementById('autobot').className += "transform_and_roll_out";
  }
</script>