<div class="container">
  <svg id="robot" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 960 570">

    <g class="head">
      <g class="levitate">
        <!-- Top of Head -->
        <path fill="#06C194" d="M480.5,9.545C436.011,9.545,400,45.61,400,90.1V166h161V90.1C561,45.61,524.989,9.545,480.5,9.545z"/>
        <path fill="#16FFC6" d="M480,10h9.04c-2.807-0.296-5.654-0.455-8.54-0.455C436.011,9.545,400,45.61,400,90.1V166h80V10z"/>
      </g>
    </g>

    <!-- Background Smoke -->
    <g class="smoke-group">
      <circle class="smoke delay-2" fill="#FAC784" cx="441" cy="484.667" r="22.167"/>
      <circle class="smoke delay-3" fill="#FFD97F" cx="455" cy="510" r="42.5"/>
      <circle class="smoke delay-4" fill="#FAC784" cx="508.258" cy="486.763" r="25.263"/>
    </g>

    <g class="lean">
      <g class="levitate">
        <!-- Jet Stream -->
        <rect x="455" y="348" fill="#FFFBB5" width="54" height="163"/>
        <polygon class="flame" fill="#FFD97F" points="469.333,328 493.667,328 481.63,460.667 "/>

        <!-- Jet Pack -->
        <g>
          <rect x="442" y="276" fill="#CCCCCC" width="39" height="65"/>
          <circle fill="#CCCCCC" cx="461.001" cy="277.087" r="19.427"/>
          <rect x="481" y="276" fill="#CCCCCC" width="38" height="65"/>
          <circle fill="#CCCCCC" cx="500.307" cy="277.087" r="19.427"/>
          <polygon fill="#CCCCCC" points="508.885,348 454.731,348 468.616,335 494.998,335 	"/>
        </g>

        <!-- Arms -->
        <path class="arm" fill="none" stroke="#06C194" stroke-width="5" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d="
          M434.833,320.333c0,0,0.143-8.807-0.911-32.76"/>
        <path class="arm delay-4" fill="none" stroke="#06C194" stroke-width="5" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d="
          M527.28,287.573c-1.054,23.953-0.911,32.76-0.911,32.76"/>

        <!-- Shoulders -->
        <circle fill="#16FFC6" cx="515.25" cy="279" r="17.75"/>
        <circle fill="#16FFC6" cx="447.25" cy="279" r="17.75"/>

        <!-- Body -->
        <rect x="447" y="241" fill="#06C194" width="67" height="65"/>

        <!-- Right Leg -->
        <g class="leg">
          <path fill="none" stroke="#06C194" stroke-width="5" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d="
          M463.833,359.333c0,0,0.143-8.807-0.911-32.76"/>

          <!-- Foot -->
          <path fill="#16FFC6" d="M479.311,361.396c-8.956-6.462-21.476-4.682-28.235,4.143c-6.759,8.823-5.219,21.372,3.351,28.339
              L479.311,361.396z"/>
        </g>

        <!-- Left Leg -->
        <g class="leg delay-6">
          <path fill="none" stroke="#06C194" stroke-width="5" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d="
          M499.28,326.573c-1.054,23.953-0.911,32.76-0.911,32.76"/>

          <!-- Foot -->    
          <path fill="#16FFC6" d="M510.386,393.843c8.519-7.028,9.965-19.592,3.139-28.363c-6.827-8.773-19.359-10.458-28.266-3.93
            L510.386,393.843z"/>
        </g>  

        <!-- Body -->
        <circle fill="#06C194" cx="480.5" cy="305.5" r="33.5"/>
      </g>
    </g>

    <!-- Smoke -->
    <g class="smoke-group">
      <circle class="smoke delay-8" fill="#FFD97F" cx="419" cy="517.193" r="22.193"/>
      <circle class="smoke delay-6" fill="#FAC784" cx="555" cy="517.193" r="22.193"/>
      <circle class="smoke delay-7" fill="#FFD97F" cx="527.28" cy="505.667" r="33.72"/>
      <circle class="smoke delay-5" fill="#FFD97F" cx="485.251" cy="514.063" r="36.877"/>
    </g>

    <g class="head">
      <g class="levitate">
        <!-- Lower Jaw -->
        <g>
          <path fill="#16FFC6" d="M370.065,176c-0.001,0-0.004-0.065-0.004,0.028c0,48.908,44.819,88.43,100.106,88.43
            c55.286,0,100.105-39.46,100.105-88.368c0-0.093-0.004-0.09-0.004-0.09H370.065z"/>
        </g>

        <!-- Eyes -->
        <circle fill="#FFFFFF" stroke="#06C194" stroke-width="5" stroke-miterlimit="10" cx="480.235" cy="141.86" r="14.015"/>
        <circle fill="#FFFFFF" stroke="#06C194" stroke-width="5" stroke-miterlimit="10" cx="444.377" cy="141.86" r="14.015"/>
      </g>
    </g>
  </svg>
</div><!-- /.container -->

$fly-in-time: 3s;
$hover-bezier: cubic-bezier(0.57, 0.19, 0.25, 0.75);
$spacing-unit: 28px;

/* Base Styles */
body {
  background: #545454;
}

.container {
  margin-top: $spacing-unit;
  max-height: 560px;
  overflow: hidden;
  width: 100%;
}

/* SVG Styles */
#robot {
  animation: fly-in $fly-in-time ease-out;
  max-height: 560px;
  width: 100%;
}

.arm,
.leg {
  animation: dangle 3s $hover-bezier 3s infinite;
  transform-origin: center;
}

.head {
  animation: attach-head $fly-in-time linear;
}

.flame {
  animation: flicker 0.35s linear infinite;
  transform-origin: 50% 50%;
}

.lean {
  animation: lean $fly-in-time linear;
  transform-origin: 50% 0%;
}

.levitate {
  animation: levitate 3s $hover-bezier infinite;
  transform-origin: 50% 50%;
}

.smoke {
  animation: smoke 0.25s linear infinite;
  transform-origin: 50% 50%;
}

.smoke-group {
  animation: track-levitate 3s $hover-bezier infinite;
  animation-delay: 0.25s;
}

// Animation delay classes
@for $i from 2 through 10 {
  .delay-#{$i} {animation-delay: 0.03s * $i;}
}

// Keyframe animations
/* 
  Flicker courtesy of:
  https://codepen.io/ghen/pen/pvwOwM
*/
@keyframes flicker {
  0% {transform: rotate(-1deg);}
  25% {transform: rotate(1deg) scaleY(1.15);}
  50%, 100% {transform: rotate(1deg);}
  75% {transform: rotate(-2deg) scaleY(0.95);}
  
}

@keyframes smoke {
  from {transform: scale(0.95);}
  to {transform: scale(1.15);}
}

/*
  Rotating hover courtesy of:
  http://lea.verou.me/2012/02/moving-an-element-along-a-circle/ 
*/
@keyframes levitate {
  from {transform: rotate(0deg) translate(-15px) rotate(0deg);}
	to {transform: rotate(360deg) translate(-15px) rotate(-360deg);}
}

@keyframes track-levitate {
  0%, 100% {transform: translateX(-20px);}
  50% {transform: translateX(0);}
}

@keyframes dangle {
  0%, 100% {transform: rotate(0deg);}
  33% {transform: rotate(10deg);}
  66% {transform: rotate(-10deg);}
}

@keyframes lean {
  0%, 100% {transform: rotate(0deg) translateX(0px);}
  20% {transform: rotate(-30deg) translateX(-130px);}
  80% {transform: rotate(-30deg) translateX(-130px);}
}

@keyframes attach-head {
  0%, 100% {transform: translate(0px 0px);}
  20% {transform: translate(-130px, 60px);}
  80% {transform: translate(-130px, 60px);}
}

@keyframes fly-in {
  0% {transform: translateX(2000px);}
  100% {transform: translateX(0px);}
}