Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <div class="wrapper">
    <div class="green-lantern-wrapper">
      <div class="hal-jordan">
        <div class="hal-body">
          <svg width="163px" height="153px" viewBox="409 314 163 153">
            <defs>
              <ellipse id="path-1" cx="50" cy="14.5" rx="50" ry="14.5"></ellipse>
              <path d="M51.5,59 C79.9426646,59 103,45.8330485 103,29.5907906 C103,13.3485328 79.9426646,0.181581219 51.5,0.181581219 C23.0573354,0.181581219 0,13.3485328 0,29.5907906 C0,45.8330485 23.0573354,59 51.5,59 Z" id="path-3"></path>
            </defs>
            <g id="Hal-Body" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(409.000000, 314.000000)">
              <g id="Right-Arm" transform="translate(0.000000, 63.000000)">
                <path d="M13.8863515,64.6887233 C10.8484326,67.9990457 7.86340998,69.9575307 6.91511111,69.1618134 C6.05046372,68.4362881 7.14672691,65.6456357 9.41815724,62.4553855 C9.3566735,62.4051735 9.29569194,62.3543228 9.23522173,62.3028429 C6.07986602,65.8451251 2.89969779,67.9879798 1.91511111,67.1618134 C0.857424449,66.274309 2.73396525,62.2966315 6.10648229,58.2774222 C6.11985675,58.2614832 6.13323465,58.2455674 6.14661581,58.229675 C6.06093856,58.0453274 5.97964995,57.8583465 5.90289165,57.6688801 C3.62940675,59.7297102 1.65400024,60.781815 0.915111108,60.1618134 C-0.142575551,59.274309 1.73396525,55.2966315 5.10648229,51.2774222 C5.11091931,51.2721344 5.1153567,51.2668491 5.11979446,51.2615664 C5.92689753,45.4579823 10.714532,41 16.5,41 C22.8512746,41 28,46.372583 28,53 C28,58.2884014 24.7216149,62.7778034 20.1698561,64.3760201 C17.0360528,67.8745762 13.8928993,69.9822751 12.9151111,69.1618134 C12.2627701,68.6144344 12.7265958,66.8915677 13.969155,64.7084656 C13.9415161,64.7019886 13.9139148,64.6954076 13.8863515,64.6887233 Z" id="Right-Hand" stroke="#EAC086" fill="#FFE0BD"></path>
                <rect id="Arm" fill="#000000" transform="translate(34.555927, 31.409209) scale(-1, 1) rotate(-40.000000) translate(-34.555927, -31.409209) " x="22.0559273" y="1.40920939" width="25" height="60"></rect>
              </g>
              <g id="Left-Arm" transform="translate(131.000000, 98.000000) scale(-1, 1) translate(-131.000000, -98.000000) translate(99.000000, 63.000000)">
                <path d="M13.8863515,64.6887233 C10.8484326,67.9990457 7.86340998,69.9575307 6.91511111,69.1618134 C6.05046372,68.4362881 7.14672691,65.6456357 9.41815724,62.4553855 C9.3566735,62.4051735 9.29569194,62.3543228 9.23522173,62.3028429 C6.07986602,65.8451251 2.89969779,67.9879798 1.91511111,67.1618134 C0.857424449,66.274309 2.73396525,62.2966315 6.10648229,58.2774222 C6.11985675,58.2614832 6.13323465,58.2455674 6.14661581,58.229675 C6.06093856,58.0453274 5.97964995,57.8583465 5.90289165,57.6688801 C3.62940675,59.7297102 1.65400024,60.781815 0.915111108,60.1618134 C-0.142575551,59.274309 1.73396525,55.2966315 5.10648229,51.2774222 C5.11091931,51.2721344 5.1153567,51.2668491 5.11979446,51.2615664 C5.92689753,45.4579823 10.714532,41 16.5,41 C22.8512746,41 28,46.372583 28,53 C28,58.2884014 24.7216149,62.7778034 20.1698561,64.3760201 C17.0360528,67.8745762 13.8928993,69.9822751 12.9151111,69.1618134 C12.2627701,68.6144344 12.7265958,66.8915677 13.969155,64.7084656 C13.9415161,64.7019886 13.9139148,64.6954076 13.8863515,64.6887233 Z" id="Left-Hand" stroke="#EAC086" fill="#FFE0BD"></path>
                <rect id="Arm" fill="#000000" transform="translate(34.555927, 31.409209) scale(-1, 1) rotate(-40.000000) translate(-34.555927, -31.409209) " x="22.0559273" y="1.40920939" width="25" height="60"></rect>
              </g>
              <g id="Torso" transform="translate(44.000000, 63.000000)">
                <rect id="Rectangle-1" fill="#3D8B37" x="0" y="0" width="75" height="75"></rect>
                <rect id="Rectangle-2" fill="#000000" x="0" y="75" width="75" height="15"></rect>
              </g>
              <g id="Chest-Symbol" transform="translate(62.000000, 80.000000)">
                <circle id="Oval-1" fill="#FFFFFF" cx="20" cy="20" r="20"></circle>
                <polygon id="Triangle-1" fill="#3D8B37" points="20 18 26 30 14 30"></polygon>
                <polygon id="Triangle-1" fill="#3D8B37" transform="translate(20.000000, 16.000000) scale(1, -1) translate(-20.000000, -16.000000) " points="20 10 26 22 14 22"></polygon>
                <circle id="Oval-5" stroke="#3D8B37" stroke-width="4" fill="#FFFFFF" cx="20" cy="20" r="6"></circle>
              </g>
              <g id="Head" transform="translate(27.000000, 14.000000)">
                <path d="M106.270894,22.0058804 C110.01134,22.1685432 113,25.6853922 113,30 C113,34.418278 109.865993,38 106,38 C105.954784,38 105.909668,37.99951 105.864656,37.9985345 C99.5306084,50.143965 79.8263788,59 56.5,59 C33.1736212,59 13.4693916,50.143965 7.1353443,37.9985345 C7.09033223,37.99951 7.04521618,38 7,38 C3.13400675,38 0,34.418278 0,30 C0,25.6853922 2.98865991,22.1685432 6.72910574,22.0058804 C12.5865736,9.43968049 32.6499893,0.181581219 56.5,0.181581219 C80.3500107,0.181581219 100.413426,9.43968049 106.270894,22.0058804 Z" id="Combined-Shape" stroke="#EAC086" stroke-width="2" fill="#FFE0BD"></path>
                <path d="M8.83202824,33.0609684 C8.21296869,33.6935615 7.39578388,34.0781588 6.5,34.0781588 C4.56700338,34.0781588 3,32.2872978 3,30.0781588 C3,28.8402714 3.49202379,27.7337193 4.26476094,27 L8.83202824,33.0609684 Z" id="Combined-Shape" fill="#EAC086"></path>
                <path d="M109.832028,33.0609684 C109.212969,33.6935615 108.395784,34.0781588 107.5,34.0781588 C105.567003,34.0781588 104,32.2872978 104,30.0781588 C104,28.8402714 104.492024,27.7337193 105.264761,27 L109.832028,33.0609684 Z" id="Combined-Shape" fill="#EAC086" transform="translate(106.916014, 30.539079) scale(-1, 1) translate(-106.916014, -30.539079) "></path>
                <path d="M62.8839492,42 C62.4226073,45.9463116 59.2666162,49 55.4419746,49 C51.6173331,49 48.461342,45.9463116 48,42 L62.8839492,42 Z" id="Mouth" stroke="#D0011B" fill="#FFFFFF"></path>
              </g>
              <g id="Mask" transform="translate(53.000000, 36.000000)">
                <path d="M0.950677234,9.76492146 C3.13131529,12.8206694 8.82255428,15 15.5,15 C21.6762218,15 27.0087339,13.1355612 29.5,10.4376701 C31.9912661,13.1355612 37.3237782,15 43.5,15 C50.4027345,15 56.2515929,12.6711328 58.2579536,9.45268707 L53.3527484,0.956622554 L29.9232203,5.08788051 L29.9200767,5.10570884 L29.8710937,5.09707183 L29.8221108,5.10570884 L29.8189672,5.08788051 L6.06879348,0.900084085 L0.950677234,9.76492146 Z" id="Combined-Shape" fill="#3D8B37"></path>
                <ellipse id="Left-Eye" fill="#FFFFFF" cx="44" cy="9" rx="5" ry="2"></ellipse>
                <ellipse id="Right-Eye" fill="#FFFFFF" cx="16" cy="9" rx="5" ry="2"></ellipse>
              </g>
              <g id="Ring" transform="translate(7.526922, 123.526922) rotate(41.000000) translate(-7.526922, -123.526922) translate(5.026922, 121.026922)" fill="#3D8B37">
                <polygon id="Triangle-3" points="2.5 2 4 5 1 5"></polygon>
                <polygon id="Triangle-3" transform="translate(2.500000, 1.500000) scale(1, -1) translate(-2.500000, -1.500000) " points="2.5 -2.84217094e-14 4 3 1 3"></polygon>
                <circle id="Oval-21" cx="2.5" cy="2.5" r="1.5"></circle>
                <rect id="Band" x="0" y="2" width="5" height="1"></rect>
              </g>
              <g id="Hair" transform="translate(31.000000, 0.000000)">
              <g id="Spikes" transform="translate(1.000000, 0.000000)">
                <mask id="mask-2" fill="white">
                  <use xlink:href="#path-1"></use>
                </mask>
                <g id="Mask"></g>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(19.135742, 23.264648) rotate(-24.000000) translate(-19.135742, -23.264648) " points="19.1357422 15.7646484 26.2686661 20.947021 23.5441316 29.3322759 14.7273528 29.3322759 12.0028183 20.947021"></polygon>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(28.135742, 20.264648) rotate(-18.000000) translate(-28.135742, -20.264648) " points="28.1357422 12.7646484 35.2686661 17.947021 32.5441316 26.3322759 23.7273528 26.3322759 21.0028183 17.947021"></polygon>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(36.135742, 18.264648) rotate(-10.000000) translate(-36.135742, -18.264648) " points="36.1357422 10.7646484 43.2686661 15.947021 40.5441316 24.3322759 31.7273528 24.3322759 29.0028183 15.947021"></polygon>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(45.135742, 16.264648) rotate(-2.000000) translate(-45.135742, -16.264648) " points="45.1357422 8.76464844 52.2686661 13.947021 49.5441316 22.3322759 40.7273528 22.3322759 38.0028183 13.947021"></polygon>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(55.135742, 16.264648) rotate(3.000000) translate(-55.135742, -16.264648) " points="55.1357422 8.76464844 62.2686661 13.947021 59.5441316 22.3322759 50.7273528 22.3322759 48.0028183 13.947021"></polygon>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(64.135742, 18.264648) rotate(10.000000) translate(-64.135742, -18.264648) " points="64.1357422 10.7646484 71.2686661 15.947021 68.5441316 24.3322759 59.7273528 24.3322759 57.0028183 15.947021"></polygon>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(71.135742, 20.264648) rotate(18.000000) translate(-71.135742, -20.264648) " points="71.1357422 12.7646484 78.2686661 17.947021 75.5441316 26.3322759 66.7273528 26.3322759 64.0028183 17.947021"></polygon>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(77.135742, 22.264648) rotate(18.000000) translate(-77.135742, -22.264648) " points="77.1357422 14.7646484 84.2686661 19.947021 81.5441316 28.3322759 72.7273528 28.3322759 70.0028183 19.947021"></polygon>
                <polygon id="Polygon-1" fill="#663300" mask="url(#mask-2)" transform="translate(83.135742, 24.264648) rotate(18.000000) translate(-83.135742, -24.264648) " points="83.1357422 16.7646484 90.2686661 21.947021 87.5441316 30.3322759 78.7273528 30.3322759 76.0028183 21.947021"></polygon>
              </g>
              <g id="Main-Hair" transform="translate(0.000000, 13.000000)">
                <mask id="mask-4" fill="white">
                  <use xlink:href="#path-3"></use>
                </mask>
                <g id="Mask"></g>
                  <path d="M51.5,16 C74.9721019,16 94,11.5228475 94,6 C94,0.477152502 74.9721019,-4 51.5,-4 C28.0278981,-4 9,0.477152502 9,6 C9,11.5228475 28.0278981,16 51.5,16 Z" id="Oval-26" fill="#663300" mask="url(#mask-4)"></path>
                </g>
                <path d="M83.4814218,18.8568614 C74.7975124,15.1742717 64.0871265,13 52.5,13 C40.3649835,13 29.1915801,15.3847511 20.3004527,19.3892948 L23.7546211,21 L78.8854463,21 L83.4814218,18.8568614 Z M84.0157508,19.0864702 C93.0204413,23.0072035 99.7774121,28.5665433 102.96681,35 L91.4363516,35 L84.0157508,19.0864702 Z M11.2037158,35 L2.03319013,35 C4.85498132,29.3080565 10.4693503,24.3003428 17.9622377,20.5063028 L11.2037158,35 Z" id="Sideburns" fill="#663300"></path>
              </g>
            </g>
          </svg>
        </div>
        <div class="hal-left-leg">
          <svg width="49px" height="78px" viewBox="498 459 49 78">
            <g id="Hal-Left-Leg" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(522.000000, 498.000000) rotate(-15.000000) translate(-522.000000, -498.000000) translate(507.000000, 462.000000)">
              <ellipse id="Foot" fill="#3D8B37" cx="15" cy="62" rx="15" ry="10"></ellipse>
              <rect id="Leg" fill="#000000" x="0" y="3.74791773e-14" width="30" height="60"></rect>
            </g>
          </svg>
        </div>
        <div class="hal-right-leg">
          <svg width="49px" height="78px" viewBox="435 459 49 78">
            <g id="Hal-Right-Leg" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(459.000000, 498.000000) rotate(15.000000) translate(-459.000000, -498.000000) translate(444.000000, 462.000000)">
              <ellipse id="Foot" fill="#3D8B37" cx="15" cy="62" rx="15" ry="10"></ellipse>
              <rect id="Leg" fill="#000000" x="0" y="3.74791773e-14" width="30" height="60"></rect>
            </g>
          </svg>
        </div>
      </div>
      <div class="ring-glow">
        <div class="glow-body">
          <svg width="182px" height="149px" viewBox="399 320 182 149">
            <g id="Glow-Body" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(399.000000, 321.000000)">
              <rect id="Rectangle-39" fill="#85FF00" x="52" y="59" width="79" height="89"></rect>
              <rect id="Rectangle-9" fill="#85FF00" transform="translate(44.555927, 87.409209) scale(-1, 1) rotate(-40.000000) translate(-44.555927, -87.409209) " x="30.0559273" y="57.4092094" width="29" height="60"></rect>
              <rect id="Rectangle-9" fill="#85FF00" transform="translate(138.555927, 87.409209) rotate(-40.000000) translate(-138.555927, -87.409209) " x="124.055927" y="57.4092094" width="29" height="60"></rect>
              <ellipse id="Oval-22" fill="#85FF00" cx="144" cy="37" rx="8" ry="10"></ellipse>
              <ellipse id="Oval-22" fill="#85FF00" cx="43" cy="37" rx="8" ry="10"></ellipse>
              <ellipse id="Oval-5" fill="#85FF00" cx="93.5" cy="37.5907906" rx="54.5" ry="29.4092094"></ellipse>
              <path d="M127.07907,11.6944632 C139.228835,17.0855563 147,25.3393018 147,34.5907906 C147,50.8330485 123.047234,64 93.5,64 C63.9527659,64 40,50.8330485 40,34.5907906 C40,25.3393018 47.7711649,17.0855563 59.9209305,11.6944632 C67.1996101,13.6888347 79.5229596,15 93.5,15 C107.47704,15 119.80039,13.6888347 127.07907,11.6944632 Z" id="Combined-Shape" fill="#85FF00"></path>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(60.635742, 15.264648) rotate(-24.000000) translate(-60.635742, -15.264648) " points="60.6357422 7.76464844 68.2441943 12.947021 65.3380242 21.3322759 55.9334602 21.3322759 53.0272901 12.947021"></polygon>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(69.635742, 12.264648) rotate(-18.000000) translate(-69.635742, -12.264648) " points="69.6357422 4.76464844 77.2441943 9.94702098 74.3380242 18.3322759 64.9334602 18.3322759 62.0272901 9.94702098"></polygon>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(78.135742, 10.264648) rotate(-10.000000) translate(-78.135742, -10.264648) " points="78.1357422 2.76464844 85.2686661 7.94702098 82.5441316 16.3322759 73.7273528 16.3322759 71.0028183 7.94702098"></polygon>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(87.135742, 8.264648) rotate(-2.000000) translate(-87.135742, -8.264648) " points="87.1357422 0.764648438 94.2686661 5.94702098 91.5441316 14.3322759 82.7273528 14.3322759 80.0028183 5.94702098"></polygon>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(97.135742, 8.264648) rotate(3.000000) translate(-97.135742, -8.264648) " points="97.1357422 0.764648438 104.268666 5.94702098 101.544132 14.3322759 92.7273528 14.3322759 90.0028183 5.94702098"></polygon>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(106.135742, 10.264648) rotate(10.000000) translate(-106.135742, -10.264648) " points="106.135742 2.76464844 113.268666 7.94702098 110.544132 16.3322759 101.727353 16.3322759 99.0028183 7.94702098"></polygon>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(113.635742, 12.264648) rotate(18.000000) translate(-113.635742, -12.264648) " points="113.635742 4.76464844 121.244194 9.94702098 118.338024 18.3322759 108.93346 18.3322759 106.02729 9.94702098"></polygon>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(119.635742, 14.264648) rotate(18.000000) translate(-119.635742, -14.264648) " points="119.635742 6.76464844 127.244194 11.947021 124.338024 20.3322759 114.93346 20.3322759 112.02729 11.947021"></polygon>
              <polygon id="Polygon-1" fill="#85FF00" transform="translate(125.635742, 16.264648) rotate(18.000000) translate(-125.635742, -16.264648) " points="125.635742 8.76464844 133.244194 13.947021 130.338024 22.3322759 120.93346 22.3322759 118.02729 13.947021"></polygon>
              <ellipse id="Oval-38" fill="#85FF00" transform="translate(155.743599, 108.324007) rotate(49.000000) translate(-155.743599, -108.324007) " cx="155.743599" cy="108.324007" rx="23" ry="14.5050001"></ellipse>
              <ellipse id="Oval-38" fill="#85FF00" transform="translate(26.743599, 108.324007) scale(-1, 1) rotate(49.000000) translate(-26.743599, -108.324007) " cx="26.7435994" cy="108.324007" rx="23" ry="14.5050001"></ellipse>
            </g>
          </svg>
        </div>
        <div class="glow-left-leg">
          <svg width="55px" height="86px" viewBox="495 455 55 86">
            <g id="Glow-Left-Leg" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(522.000000, 498.000000) rotate(-15.000000) translate(-522.000000, -498.000000) translate(505.000000, 459.000000)">
              <rect id="Rectangle-37" fill="#85FF00" x="0" y="0" width="34" height="65"></rect>
              <ellipse id="Oval-2" fill="#85FF00" cx="17" cy="66.5" rx="17" ry="11.5"></ellipse>
            </g>
          </svg>
        </div>
        <div class="glow-right-leg">
          <svg width="57px" height="90px" viewBox="432 450 57 90">
            <g id="Glow-Right-Leg" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(460.000000, 494.500000) rotate(15.000000) translate(-460.000000, -494.500000) translate(443.000000, 453.000000)">
              <rect id="Rectangle-37" fill="#85FF00" x="0" y="0" width="34" height="71"></rect>
              <ellipse id="Oval-2" fill="#85FF00" cx="17" cy="71.5" rx="17" ry="11.5"></ellipse>
            </g>
          </svg>
        </div>
      </div>
    </div>
    <div class='shadow'>
    </div>
  </div>
</body>
              
            
!

CSS

              
                body,
html {
  background: #F5F8FA;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.green-lantern-wrapper {
  bottom: 0;
  height: 198px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 182px;
  z-index: 2;
}

.hal-jordan {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 182px;

  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-name: flyAway;
  -webkit-animation-name: flyAway;
}

.hal-left-leg {
  bottom: -29px;
  left: 89px;
  position: absolute;

  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-name: rotateLeftLeg;
  -webkit-animation-name: rotateLeftLeg;
}

.hal-right-leg {
  bottom: -29px;
  left: 26px;
  position: absolute;

  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-name: rotateRightLeg;
  -webkit-animation-name: rotateRightLeg;
}

.ring-glow {
  bottom: 0;
  left: -20px;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 6px;
  width: 182px;
  z-index: -1;

  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-name: fadeInFlyAway;
  -webkit-animation-name: fadeInFlyAway;
}

.glow-left-leg {
  bottom: -32px;
  left: 96px;
  opacity: 0;
  position: absolute;

  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-name: rotateLeftLegGlow;
  -webkit-animation-name: rotateLeftLegGlow;
}

.glow-right-leg {
  bottom: -32px;
  left: 33px;
  opacity: 0;
  position: absolute;

  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-name: rotateRightLegGlow;
  -webkit-animation-name: rotateRightLegGlow;
}

.shadow {
  background-color: #444;
  border-radius: 50%;
  bottom: -240px;
  height: 30px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 161px;
  z-index: 1;

  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-name: shadow;
  -webkit-animation-name: shadow;
}

.wrapper {
  bottom: 0;
  height: 205px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 161px;
}

@keyframes fadeInFlyAway {
  0% { opacity: 0; transform: translateY(0%); }
  15% { opacity: 1; transform: translateY(0%); }
  30% { opacity: 1; transform: translateY(-100%); }
  40% { opacity: 1; transform: translateY(-80%); }
  50% { opacity: 1; transform: translateY(-100%); }
  60% { opacity: 1; transform: translateY(-80%); }
  70% { opacity: 1; transform: translateY(-100%); }
  85% { opacity: 1; transform: translateY(0%); }
  100% { opacity: 0; transform: translateY(0%); }
}

@-webkit-keyframes fadeInFlyAway {
  0% { opacity: 0; transform: translateY(0%); }
  15% { opacity: 1; transform: translateY(0%); }
  30% { opacity: 1; transform: translateY(-100%); }
  40% { opacity: 1; transform: translateY(-80%); }
  50% { opacity: 1; transform: translateY(-100%); }
  60% { opacity: 1; transform: translateY(-80%); }
  70% { opacity: 1; transform: translateY(-100%); }
  85% { opacity: 1; transform: translateY(0%); }
  100% { opacity: 0; transform: translateY(0%); }
}

@keyframes flyAway {
  0% { transform: translateY(0%); }
  15% { transform: translateY(0%); }
  30% { transform: translateY(-97%); }
  40% { transform: translateY(-77%); }
  50% { transform: translateY(-97%); }
  60% { transform: translateY(-77%); }
  70% { transform: translateY(-97%); }
  85% { transform: translateY(0%); }
  100% { transform: translateY(0%); }
}

@-webkit-keyframes flyAway {
  0% { transform: translateY(0%); }
  15% { transform: translateY(0%); }
  30% { transform: translateY(-97%); }
  40% { transform: translateY(-77%); }
  50% { transform: translateY(-97%); }
  60% { transform: translateY(-77%); }
  70% { transform: translateY(-97%); }
  85% { transform: translateY(0%); }
  100% { transform: translateY(0%); }
}

@keyframes rotateLeftLeg {
  0% { transform: rotate(0deg); left: 89px; }
  15% { transform: rotate(0deg); left: 89px; }
  22% { transform: rotate(15deg); left: 79px; }
  78% { transform: rotate(15deg); left: 79px; }
  85% { transform: rotate(0deg); left: 89px; }
  100% { transform: rotate(0deg); left: 89px; }
}

@-webkit-keyframes rotateLeftLeg {
  0% { transform: rotate(0deg); left: 89px; }
  15% { transform: rotate(0deg); left: 89px; }
  22% { transform: rotate(15deg); left: 79px; }
  78% { transform: rotate(15deg); left: 79px; }
  85% { transform: rotate(0deg); left: 89px; }
  100% { transform: rotate(0deg); left: 89px; }
}

@keyframes rotateLeftLegGlow {
  0% { opacity: 0; transform: rotate(0deg); left: 96px; }
  15% { opacity: 1; transform: rotate(0deg); left: 96px; }
  22% { opacity: 1; transform: rotate(15deg); left: 86px; }
  78% { opacity: 1; transform: rotate(15deg); left: 86px; }
  85% { opacity: 1; transform: rotate(0deg); left: 96px; }
  100% { opacity: 0; transform: rotate(0deg); left: 96px; }
}

@-webkit-keyframes rotateLeftLegGlow {
  0% { opacity: 0; transform: rotate(0deg); left: 96px; }
  15% { opacity: 1; transform: rotate(0deg); left: 96px; }
  22% { opacity: 1; transform: rotate(15deg); left: 86px; }
  78% { opacity: 1; transform: rotate(15deg); left: 86px; }
  85% { opacity: 1; transform: rotate(0deg); left: 96px; }
  100% { opacity: 0; transform: rotate(0deg); left: 96px; }
}

@keyframes rotateRightLeg {
  0% { transform: rotate(0deg); left: 26px; }
  15% { transform: rotate(0deg); left: 26px; }
  22% { transform: rotate(-15deg); left: 36px; }
  78% { transform: rotate(-15deg); left: 36px; }
  85% { transform: rotate(0deg); left: 26px; }
  100% { transform: rotate(0deg); left: 26px; }
}

@-webkit-keyframes rotateRightLeg {
  0% { transform: rotate(0deg); left: 26px; }
  15% { transform: rotate(0deg); left: 26px; }
  22% { transform: rotate(-15deg); left: 36px; }
  78% { transform: rotate(-15deg); left: 36px; }
  85% { transform: rotate(0deg); left: 26px; }
  100% { transform: rotate(0deg); left: 26px; }
}

@keyframes rotateRightLegGlow {
  0% { opacity: 0; transform: rotate(0deg); left: 33px; }
  15% { opacity: 1; transform: rotate(0deg); left: 33px; }
  22% { opacity: 1; transform: rotate(-15deg); left: 42px; }
  78% { opacity: 1; transform: rotate(-15deg); left: 42px; }
  85% { opacity: 1; transform: rotate(0deg); left: 33px; }
  100% { opacity: 0; transform: rotate(0deg); left: 33px; }
}

@-webkit-keyframes rotateRightLegGlow {
  0% { opacity: 0; transform: rotate(0deg); left: 33px; }
  15% { opacity: 1; transform: rotate(0deg); left: 33px; }
  22% { opacity: 1; transform: rotate(-15deg); left: 42px; }
  78% { opacity: 1; transform: rotate(-15deg); left: 42px; }
  85% { opacity: 1; transform: rotate(0deg); left: 33px; }
  100% { opacity: 0; transform: rotate(0deg); left: 33px; }
}

@keyframes shadow {
  0% { background-color: #444; transform: scale(1); }
  15% { background-color: #444; transform: scale(1); }
  30% { background-color: #AAA; transform: scale(0.25); }
  40% { background-color: #888; transform: scale(0.33); }
  50% { background-color: #AAA; transform: scale(0.25); }
  60% { background-color: #888; transform: scale(0.33); }
  70% { background-color: #AAA; transform: scale(0.25); }
  85% { background-color: #444; transform: scale(1); }
  100% { background-color: #444; transform: scale(1); }
}

@-webkit-keyframes shadow {
  0% { background-color: #444; transform: scale(1); }
  15% { background-color: #444; transform: scale(1); }
  30% { background-color: #AAA; transform: scale(0.25); }
  40% { background-color: #888; transform: scale(0.33); }
  50% { background-color: #AAA; transform: scale(0.25); }
  60% { background-color: #888; transform: scale(0.33); }
  70% { background-color: #AAA; transform: scale(0.25); }
  85% { background-color: #444; transform: scale(1); }
  100% { background-color: #444; transform: scale(1); }
}
              
            
!

JS

              
                
              
            
!
999px

Console