<div class="contain contain-sm">
  <div class="lilguy">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="lil-guy" x="0" y="0" viewBox="0 0 109 85" enable-background="new 0 0 109 85" xml:space="preserve">
      <linearGradient id="wingb_1_" gradientUnits="userSpaceOnUse" x1="103.9" y1="58.3" x2="101.6" y2="41">
        <stop offset="0" stop-color="#FFED92" />
        <stop offset="1" stop-color="#7D491F" />
      </linearGradient>
      <ellipse id="wingb" fill="url(#wingb_1_)" cx="101.8" cy="42.9" rx="6" ry="8.1" />
      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="16.3" y1="-4" x2="18" y2="8.6" gradientTransform="matrix(-1 0 0 1 98.3076 0)">
        <stop offset="0" stop-color="#FFED92" />
        <stop offset="1" stop-color="#7D491F" />
      </linearGradient>
      <path fill="url(#SVGID_1_)" d="M80.7 5.4C80.7 5.4 80.7 5.4 80.7 5.4 80.7 5.4 80.7 5.4 80.7 5.4z" />
      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="12.5" y1="-24.5" x2="42.4" y2="63.3" gradientTransform="matrix(-1 0 0 1 98.3076 0)">
        <stop offset="0" stop-color="#FFED92" />
        <stop offset="1" stop-color="#7D491F" />
      </linearGradient>
      <path fill="url(#SVGID_2_)" d="M22.6 35.4c0 0 0 2.3 0.3 3.7 0 0 1.6-17.7 14.4-27 12.8-9.3 26.1-8.8 26.1-8.8S57.9 4.1 55 5.6c0 0 12.9-2.8 25.7-0.2C80.3 5.3 74 4.1 63 5.9c0 0 15.5-2.1 26.4 6.7 0 0-1.1-1.6-2.5-2.5 0 0 18.2 7.9 16.6 34.5 -1.1 18.9-12.8 26.2-12.8 26.2s2.1-2.4 2.1-3.7c0 0-2.6 3.9-10.9 7.1 -1.3 1.2-2.5 2.5-2.3 3.5 0 0-1.2-0.5-1.2-1.5 0 0-2.1 1.8-2.1 3.2 0 0-1-0.8-1.1-1.7 0 0-1.5 1-1.5 1.7 0 0-0.7-0.5-0.7-1.5 0 0-0.9 2-1.6 2.7 0 0 0.1-1.6-2.2-2.5 0 0 0.2 1.1-0.2 1.5 0 0 0-1.1-2.5-2 -0.6 0.1-1.2 0.1-1.9 0.2 -1.6 0.1-3.1 0.2-4.6 0.1 -0.8 0.2-1.8 0.5-2.1 1.3 0 0-0.7-2-2.5-1.2 -1 0.4-1.1 1-0.9 1.4C54 78.7 53.2 78 52 78.6c0 0-0.6-0.9-1.7 0.1 0 0-0.5-1.4-2.1-2.6 0 0 0.2 1.2-0.2 2.2 0 0-0.6-2.4-3.4-3.7 0 0 0.4 0.5 0.1 1.4 0 0-0.4-1.2-1.8-2.3C33.9 69 28.3 61.7 26.2 57.3 22.7 50.1 21.1 42.5 22.6 35.4z"
      />
      <path fill="#FFFFFF" d="M38.3 46.2c-0.6-4.6-2.3-20.7 24.2-23.6 0 0-7.6 3.3-8.5 3.7 0 0 12.7-4.6 17.8 1.7 5.1 6.2 7.2 17.1-1.7 28.5 0 0-1.5-2.2-0.9-4.2 0 0-6.6 13-17.9 10.4 -11.3-2.5-12.7-11-12.7-11s1.4 2.7 2.7 3.5C41.3 55.1 39 51.4 38.3 46.2z" />
      <path fill="#FFFFFF" d="M102.2 40c-0.5-3.1-1.7-10.9-8-15.6 0 0 0.2 0.8 0.3 1.6 0 0-2.9-3.2-5.2-2 0.6 0.1 3.1 0.5 0.9 0.9C89.4 25 93 56.1 96.9 56.2c3.9 0.1 4.7-3.8 4.7-3.8s-0.5 0.7-1.1 0.7C100.6 53.1 103.2 46.9 102.2 40z" />
      <defs>
        <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="51.2" y="30.2" width="18.3" height="18.2">
          <feColorMatrix type="matrix" values="1" />
        </filter>
      </defs>
      <mask maskUnits="userSpaceOnUse" x="51.2" y="30.2" width="18.3" height="18.2" id="SVGID_3_">
        <g filter="url(#Adobe_OpacityMaskFilter)">
          <radialGradient id="SVGID_4_" cx="909.8" cy="1636.5" r="1.2" gradientTransform="matrix(2.540000e-02 -7.8246 7.8923 0.3337 -12877.9307 6612.2393)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#FFFFFF" />
            <stop offset="1" stop-color="#010101" />
          </radialGradient>
          <path fill="url(#SVGID_4_)" d="M60.6 29.8c5.4 0.2 9.7 4.7 9.7 10.1 0 5.3-4.4 9.5-9.8 9.2 -5.4-0.2-9.7-4.7-9.7-10.1C50.8 33.7 55.2 29.6 60.6 29.8z" />
        </g>
      </mask>
      <path opacity="0.8" mask="url(#SVGID_3_)" fill="#010101" d="M60.4 30.2c5.1 0.2 9.2 4.5 9.1 9.5 0 5-4.1 8.9-9.2 8.7 -5.1-0.2-9.2-4.5-9.1-9.5C51.2 33.8 55.3 29.9 60.4 30.2z" />
      <circle fill="#010101" cx="60.4" cy="39.1" r="6.9" />
      <path fill="#6CC9C6" d="M52.7 39.1c0-4.2 3.4-7.6 7.6-7.6 4.2 0 7.6 3.4 7.6 7.6 0 4.2-3.4 7.6-7.6 7.6C56.2 46.8 52.7 43.3 52.7 39.1zM54.1 39.1c0 3.5 2.8 6.3 6.3 6.3 3.5 0 6.3-2.8 6.3-6.3 0-3.5-2.8-6.3-6.3-6.3C56.9 32.9 54.1 35.7 54.1 39.1z" />
      <defs>
        <filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="53.3" y="32" width="14.2" height="14.2">
          <feColorMatrix type="matrix" values="1" />
        </filter>
      </defs>
      <mask maskUnits="userSpaceOnUse" x="53.3" y="32" width="14.2" height="14.2" id="SVGID_5_">
        <g filter="url(#Adobe_OpacityMaskFilter_1_)">
          <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="38.1" y1="31.7" x2="38.1" y2="48.6" gradientTransform="matrix(-1 0 0 1 98.3076 0)">
            <stop offset="0" stop-color="#FFFFFF" />
            <stop offset="0.1" stop-color="#C5C3C3" />
            <stop offset="0.3" stop-color="#7E7B7B" />
            <stop offset="0.5" stop-color="#504D4D" />
            <stop offset="0.6" stop-color="#31302F" />
            <stop offset="0.8" stop-color="#1A1A1A" />
            <stop offset="0.9" stop-color="#080908" />
            <stop offset="1" stop-color="#010101" />
          </linearGradient>
          <circle fill="url(#SVGID_6_)" cx="60.2" cy="39.2" r="7.9" />
        </g>
      </mask>
      <circle opacity="0.5" mask="url(#SVGID_5_)" fill="#FFFFFF" cx="60.4" cy="39.1" r="7.1" />
      <circle fill="#FFFFFF" cx="63.5" cy="36" r="1.9" />
      <circle fill="#FFFFFF" cx="61.1" cy="33.7" r="1.1" />
      <defs>
        <filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="92.2" y="28.1" width="6.8" height="16.4">
          <feColorMatrix type="matrix" values="1" />
        </filter>
      </defs>
      <mask maskUnits="userSpaceOnUse" x="92.2" y="28.1" width="6.8" height="16.4" id="SVGID_7_">
        <g filter="url(#Adobe_OpacityMaskFilter_2_)">
          <radialGradient id="SVGID_8_" cx="910.8" cy="1607.2" r="1.1" gradientTransform="matrix(-0.7537 -7.7882 3.1694 2.440162e-02 -4311.8569 7090.6162)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#FFFFFF" />
            <stop offset="1" stop-color="#010101" />
          </radialGradient>
          <path fill="url(#SVGID_8_)" d="M94.9 27.8c2 0 3.9 3.9 4.4 8.7 0.5 4.8-0.7 8.7-2.7 8.7 -2 0-3.9-3.9-4.4-8.7C91.7 31.7 92.9 27.8 94.9 27.8z" />
        </g>
      </mask>
      <path opacity="0.8" mask="url(#SVGID_7_)" fill="#010101" d="M94.8 28.1c1.8 0 3.7 3.7 4.1 8.2 0.4 4.5-0.7 8.2-2.5 8.2 -1.8 0-3.7-3.7-4.1-8.2C91.9 31.8 93 28.1 94.8 28.1z" />
      <path opacity="0.5" fill="#25B6A5" d="M92.9 36.5c-0.4-3.8 0.6-7 2.1-7.1 1.5-0.1 3 2.8 3.4 6.6 0.4 3.8-0.6 7-2.1 7.1C94.8 43.2 93.2 40.3 92.9 36.5z" />
      <path fill="#010101" d="M93.6 36.4c0.3 3.3 1.6 5.9 2.8 5.8 1.2-0.1 2.7-3.2 2.4-6.5 -0.3-3.3-2.3-5.6-3.5-5.5C94 30.3 93.3 33.1 93.6 36.4z" />
      <defs>
        <filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="93.2" y="29.8" width="5.6" height="12.7">
          <feColorMatrix type="matrix" values="1" />
        </filter>
      </defs>
      <mask maskUnits="userSpaceOnUse" x="93.2" y="29.8" width="5.6" height="12.7" id="SVGID_9_">
        <g filter="url(#Adobe_OpacityMaskFilter_3_)">
          <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="47.6" y1="14.8" x2="47.6" y2="30.1" gradientTransform="matrix(-0.9506 9.321949e-02 9.764928e-02 0.9953 139.0898 10.2644)">
            <stop offset="0" stop-color="#FFFFFF" />
            <stop offset="0" stop-color="#F2F2F1" />
            <stop offset="0.2" stop-color="#969292" />
            <stop offset="0.4" stop-color="#5B5958" />
            <stop offset="0.6" stop-color="#373535" />
            <stop offset="0.8" stop-color="#1E1D1D" />
            <stop offset="0.9" stop-color="#0A0A0A" />
            <stop offset="1" stop-color="#010101" />
          </linearGradient>
          <path fill="url(#SVGID_10_)" d="M93 36.6c0.4 3.9 1.9 7 3.4 6.9 1.5-0.1 3-3.5 2.6-7.5 -0.4-3.9-2.5-6.9-4-6.8C93.5 29.3 92.6 32.6 93 36.6z" />
        </g>
      </mask>
      <path opacity="0.5" mask="url(#SVGID_9_)" fill="#FFFFFF" d="M93.3 36.4c0.3 3.5 1.7 6.3 3.1 6.1 1.3-0.1 2.8-3.2 2.4-6.7 -0.3-3.5-2.3-6.1-3.7-6C93.8 29.9 93 32.9 93.3 36.4z" />
      <ellipse transform="matrix(-0.9371 0.349 -0.349 -0.9371 200.1291 30.2291)" fill="#FFFFFF" cx="97.3" cy="33.1" rx="0.7" ry="1.7" />
      <ellipse transform="matrix(-0.9638 0.2668 -0.2668 -0.9638 196.562 36.041)" fill="#FFFFFF" cx="95.8" cy="31.4" rx="0.4" ry="1" />
      <linearGradient id="wingt_1_" gradientUnits="userSpaceOnUse" x1="233.6" y1="10.7" x2="236" y2="-35.1" gradientTransform="matrix(0.5946 -1.9455 -0.9563 -0.2923 -151.0457 495.2623)">
        <stop offset="0" stop-color="#FFED92" />
        <stop offset="1" stop-color="#7D491F" />
      </linearGradient>
      <path id="wingt" fill="url(#wingt_1_)" d="M13 56.8c0 0 1.3-2.2 2.7-3 0 0-2.9 3-9.2-2.8 0 0 1.9-2.5 4.2-2.6 0 0-2.7-0.6-4.5-0.1 -5 1.2 8.3-12.4 12.9-13.4 1.6-0.3 4.4-3.2 9.3 0.2 0 0 8.3-0.9 6.5 8.3C32.3 56.4 16.8 61 13 56.8z" />
      <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="83.8" y1="64.6" x2="84.4" y2="53.9">
        <stop offset="0" stop-color="#FFED92" />
        <stop offset="1" stop-color="#7D491F" />
      </linearGradient>
      <path fill="url(#SVGID_11_)" d="M79.2 53.8c0 0 5-4.5 9.7-1 0 0 1.9 3.5 0.5 4 0 0-1.5-0.9-2.7 0.5 0 0-2.5 1.3-3.7 0 0 0-2.1-1.2-2.9 0C80 57.3 77.6 58.5 79.2 53.8z" />
      <path fill="#CC794F" d="M75.5 64.8c0 0 6.1-3.6 7.6-2.4 1.4 1.1 3.3-0.2 3.3-0.2s0.6-1.2 4.5 0C90.9 62.1 88.3 66.8 75.5 64.8z" />
      <path fill="#A09F9F" d="M33.8 18.9c0 0-2.1-12-6.9-13.4s-2.1-2.4 0-2.3c2.1 0.1 9.2 2.3 9.2 2.3s8.9 2.6 9.2 5.6S41.3 18 41.3 18 36.1 23.1 33.8 18.9z" />
      <path fill="#A09F9F" d="M96 16.8c0 0 1.4-8.3 4.8-9.3s1.4-1.6 0-1.6c-1.4 0.1-6.4 1.6-6.4 1.6s-6.2 1.8-6.4 3.9c-0.2 2.1 2.7 4.8 2.7 4.8S94.4 19.7 96 16.8z" />
    </svg>
  </div>
  <!--rotate-->
</div>
<!--contain-->
<div class="contain">
  <a class="logIt">Log It!</a>
  <div class="clear"></div>
  <div class="term-contain">
  <div class="term">
    <div class="term-top">
      <div class="term-circle c1"></div>
      <div class="term-circle c2"></div>
      <div class="term-circle c3"></div>
    </div>
    <!--term-top-->
    <div class="term-content"></div>
  </div>
  <!--term-->
  </div><!--term-contain-->
</div>
body {
  background-color: #472b34;
  margin: 0;
  font-family: 'Source Code Pro', consolas, monospace;
}

.contain {
  width: 40%;
  height: 100%;
  float: left;
  margin-left: 5%;
}

.logIt {
  float: left;
  margin-top: 30px;
  background: #222;
  color: #555;
  padding: 14px;
  cursor: pointer;
  border-radius: 3px;
  transition: 0.5s ease all;
  &:hover {
    background: #1D1D1D;
  }
}

.contain-sm {
  height: 150px;
}

svg {
  width: 150px;
  height: 100%;
  margin-left: 55%;
  margin-top: 30px;
}

.restart {
  animation: lilguygo 3s ease-in-out 4 both;
}

.term-content {
  padding: 20px 15px;
}

.term-contain {
  width: 220px;
  float: left;
  margin: 30px 8%;
}

.term { 
  width: 220px;
  background: #777575;
  height: 160px;
  border-radius: 5px;
  float: left;
  p {
    font-family: 'Source Code Pro', consolas, monospace;
    color: #d0cfcf;
    padding: 0;
    margin: 7px 0;
    line-height: 1em;
    font-size: 70%;
  }
}

.term-top { 
  width: 220px;
  position: absolute; 
  height: 15px;
  border-radius: 5px 5px 0 0;
  background: #c3c2c2;
}
.term-circle {
  border-radius: 50%;
  background: #fff;
  margin-top: 5px;
  height: 4px;
  width: 4px;
  position: absolute;
  &.c1 { margin-left: 8px; }
  &.c2 { margin-left: 15px; }
  &.c3 { margin-left: 22px; }
}


@keyframes lilguygo {
  25% {
    transform: translateY(50px);
  }
  50% {
    transform: translateY(25px);
  }
  75% {
    transform: translateY(50px);
  }
}

@media (max-width: 800px) {
  .logIt { margin-left: 8%; }
}

@media (max-width: 600px) {
  .contain {
    width: 100% !important;
  }
  svg {
    margin-left: 25%;
  }
  .clear {
    clear: both;
  }
  .term-contain {
    width: 100% !important;
  }
}
View Compiled
var lil = $(".lilguy"),
  logIt = $(".logIt"),
  log = $(".term-content");

logIt.on('click', function() {
  lil.addClass('restart');
});

lil.on('animationstart webkitAnimationStart oanimationstart MSAnimationStart', function(e) {
  log.empty();
  log.append("<p>Animation has started.</p>");
});

lil.on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(e) {
  log.append("<p>An iteration fired.");
});

lil.on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function(e) {
  log.append("<p>Animation has completed.</p>");
  lil.removeClass("restart");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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