RE. SPECT. WALK.

by mvasilkov

HTML

<div class="ch">
    <div class="ch-head"></div>
    <div class="ch-body">
        <div class="ch-arms">
            <div class="avatar-torso-arms-arm-left">
                <div class="arm left">
                    <div class="arm-upper"></div>
                    <div class="arm-fore">
                        <div class="hand"></div>
                    </div>
                </div>
            </div>
            <div class="arm right">
                <div class="arm-upper"></div>
                <div class="arm-fore">
                    <div class="hand"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="avatar-legs">
        <div class="leg left">
            <div class="leg-thigh"></div>
            <div class="leg-shin"></div>
        </div>
        <div class="leg right">
            <div class="leg-thigh"></div>
            <div class="leg-shin"></div>
        </div>
    </div>
</div>

SCSS

$animation-length: 0.25s;
 .ch {
    animation: walk $animation-length infinite alternate-reverse ease-in-out;
    display: inline-block;
}
.ch-head {
    width: 2em;
    height: 2em;
    background: #fb2606;
    border-radius: 1em;
    left: -0.2em;
    position: relative;
}
.ch-body {
    position: relative;
    height: 1.5em;
    width: 1em;
    background: #d72d18;
    border-radius: 1em 1em 0 0;
}
.ch-arms {
    position: relative;
}
/* ---------------------------------------- */


.avatar-torso-arms-arm-left {
  position: relative;
  z-index: -1;
}
.avatar-legs {
  position: relative;
  z-index: -1;
  margin-top: -0.5em;
}
.arm {
  font-size: 0.9em;
  position: relative;
  width: 1em;
  -webkit-transform-origin: 50% 0.5em;
      -ms-transform-origin: 50% 0.5em;
          transform-origin: 50% 0.5em;
  position: absolute;
}
.arm.left {
          animation: arm 0.25s infinite alternate ease-in-out;
}
.arm.left .arm-fore {
          animation: arm-fore 0.25s infinite alternate ease-in-out;
}
.arm.right {
          animation: arm 0.25s infinite alternate-reverse ease-in-out;
}
.arm.right .arm-fore {
  background: #f33;
          animation: arm-fore 0.25s infinite alternate-reverse ease-in-out;
}
.arm.right .arm-upper {
  background: #f33;
}
.arm-upper {
  height: 1.5em;
  background: #c00;
  border-radius: 1em;
}
.arm-fore {
  background: #c00;
  height: 1.5em;
  -webkit-animation-duration: inherit;
          animation-duration: inherit;
  -webkit-transform-origin: 50% 0.5em;
      -ms-transform-origin: 50% 0.5em;
          transform-origin: 50% 0.5em;
  position: relative;
  top: -1em;
  border-radius: 1em;
}
.hand {
  width: 1em;
  height: 0.5em;
  background: #d2b48c;
  position: absolute;
  bottom: 0;
  border-radius: 0 0 1em 1em;
}
.leg {
  position: relative;
  width: 1em;
  -webkit-transform-origin: 50% 0.5em;
      -ms-transform-origin: 50% 0.5em;
          transform-origin: 50% 0.5em;
}
.leg.left {
  position: absolute;
  -webkit-animation: leg 0.25s...