Stickman drinking

index.html

<div class="box drink">
  <svg width="303px" height="280px" viewBox="-3 -1 303 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
      <desc>Created with Sketch.</desc>
      <defs>
          <polygon id="path-1" points="0 0 30.17 269.38 94.99 269.38 125.27 90"></polygon>
      </defs>
      <g id="rebus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Group">
              <g id="rebus">
                  <g id="rebus-group">
                      <g id="pint">
                          <g id="beer-Clipped">
                              <mask id="mask-2" fill="white">
                                  <use xlink:href="#path-1"></use>
                              </mask>
                              <g id="Shape"></g>
                              <g id="beer" mask="url(#mask-2)" stroke-linecap="round">
                                  <g transform="translate(0.000000, 103.000000)">
                                      <polyline id="ale" stroke="#000000" stroke-width="1" fill-opacity="0.8" fill="#A95319" fill-rule="evenodd" points="10 1 30.17 166.38 94.99 166.38 115.27 1"></polyline>
                                      <path d="M0.87,0 L115.87,0" id="ale-head" stroke="#F9F4F1" stroke-width="18" fill="none"></path>
                                  </g>
                              </g>
                          </g>
                          <polyline id="Path-6" stroke="#000000" stroke-width="18" stroke-linecap="round" points="10 104 30.17 269.38 94.99 269.38 115.27 104"></polyline>
                      </g>
                      <g id="hand" stroke="#000000" stroke-width="18" stroke-linecap="round">
                          <path d="M6,159 L24,159" id="Path-7"></path>
                          <path d="M7,184 L32,184" id="Path-8"></path>
                          <path d="M10,211 L32,211" id="Path-9"></path>
                          <path d="M12,235 L30,235" id="Path-10"></path>
                          <path d="M96.23,163.31 L113.37,164" id="Path-11"></path>
                          <path d="M113.55,164.2 L125.69,178.02" id="Path-16"></path>
                      </g>
                      <g id="arms" transform="translate(106.000000, 162.000000)" stroke="#000000" stroke-width="18" stroke-linecap="round">
                          <path d="M91.6,6.4 L137.21,0.28" id="right-arm"></path>
                          <path d="M91.6,6.4 L0.3,18.61" id="right-forearm"></path>
                          <path d="M137.21,0.28 L184.48,19.85" id="left-arm"></path>
                      </g>
                      <g id="body" transform="translate(242.000000, 162.000000)" stroke="#000000" stroke-width="18" stroke-linecap="round">
                          <path d="M0.82,55.74 L0.84,0.12" id="Path-15"></path>
                      </g>
                      <g id="head" transform="translate(219.000000, 100.000000)" stroke="#000000" stroke-width="18" stroke-linecap="round">
                          <circle id="Oval" cx="23" cy="23.74" r="23"></circle>
                      </g>
                      <g id="legs" transform="translate(202.000000, 215.000000)" stroke="#000000" stroke-width="18" stroke-linecap="round">
                          <path d="M79.35,50.04 L69.84,50.04" id="right-foot"></path>
                          <path d="M40.36,0.72 L9.83,50.04" id="right-leg"></path>
                          <path d="M69.84,50.04 L40.36,0.72" id="left-leg"></path>
                          <path d="M9.83,50.04 L0.16,50.04" id="left-foot"></path>
                      </g>
                  </g>
              </g>
          </g>
      </g>
  </svg>
</div>

stickman-drinking.markdown

Stickman drinking

A Pen by Lee Chase on CodePen.

License.

style.css

body {
  margin: 0;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#pint {
  transform-origin: 200px 170px;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

.drink #pint {
  animation-name: drink-pint;  
}

@keyframes drink-pint {
  0% {
    transform: scale(1) rotate(0deg);
  }
  
  12.5% {
    transform: scale(.3) rotate(75deg);
  }

  37.5% {
    transform: scale(.3) rotate(75deg);
  }
   
  50% {
    transform: scale(1) rotate(0deg);
  }
}

#right-forearm {
  transform-origin: 97% 30%;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

.drink #right-forearm {
  animation-name: drink-forearm;
}

@keyframes drink-forearm {
  0% {
    transform: scale(1) rotate(0deg);
  }
  
  12.5% {
    transform: scaleY(.3) rotate(90deg);
  }

  37.5% {
    transform: scaleY(.3) rotate(90deg);
  }
   
  50% {
    transform: scale(1) rotate(0deg);
  }
}

#hand {
  transform-origin: 200px 170px;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

.drink #hand {
  animation-name: drink-hand;
}

@keyframes drink-hand {
  0% {
    transform: scale(1) rotate(0deg);
  }
  
  12.5% {
    transform: scale(.3) rotate(75deg);
  }

  37.5% {
    transform: scale(.3) rotate(75deg);
  }
   
  50% {
    transform: scale(1) rotate(0deg);
  }
}

#ale, #ale-head {
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

.drink #ale, .drink #ale-head {
  animation-name: drink-ale;
}

@keyframes drink-ale {
  0% {
    transform: translateY(0px);
  }

  12.5% {
    transform: translateY(0px);
  }

  37.5% {
    transform: translateY(160px);
  }

  50% {
    transform: translateY(160px);
  }

  60% {
    transform: translateY(160px);
  }

  100% {
    transform: translateY(0px);
  }  
}