<div class="c-hatsuneMiku-container">
  <div class="c-hatsuneMiku">
    <div class="c-hatsuneMiku-headWrap">
      <div class="c-hatsuneMiku-eyelashes--left"></div>
      <div class="c-hatsuneMiku-eyelashes--right"></div>
      <div class="c-hatsuneMiku-eye--left"></div>
      <div class="c-hatsuneMiku-eye--right"></div>
      <div class="c-hatsuneMiku-mouth"></div>
      <div class="c-hatsuneMiku-hair--left"></div>
      <div class="c-hatsuneMiku-hair--right"></div>
    </div>

    <div class="c-hatsuneMiku-bodyWrap">
      <div class="c-hatsuneMiku-body"></div>
      <div class="c-hatsuneMiku-tie"></div>
      <div class="c-hatsuneMiku-arm--left"></div>
      <div class="c-hatsuneMiku-arm--right"></div>
      <div class="c-hatsuneMiku-foot--left"></div>
      <div class="c-hatsuneMiku-foot--right"></div>
    </div>
  </div>
</div>
.c-hatsuneMiku-container {
  display: flex;
  justify-content: center;
}

.c-hatsuneMiku {
  width: 670px;
  height: 1000px;
  overflow: hidden;
  position: relative;
  transform-origin: bottom left;
  zoom: .5;

  div {
    background-image: url('https://blog.hayu.io/wp-content/uploads/2015/10/39.png');
  }
}

.c-hatsuneMiku-headWrap {
  width: 425px;
  height: 413px;
  position: absolute;
  left: 150px;
}

.c-hatsuneMiku-eyelashes {
  &--left,
  &--right {
    width: 61px;
    height: 17px;
    background-position: -533px -73px;
    position: absolute;
  }

  &--left {
    transform: scale(-1,1);
    top: 175px;
    left: 80px;
  }

  &--right {
    transform: rotate(10deg);
    top: 194px;
    left: 254px;
  }
}

.c-hatsuneMiku-eye {
  &--left,
  &--right {
    width: 41px;
    height: 88px;
    background-position: -537px -116px;
    position: absolute;
    transform-origin: bottom;
    animation: eye infinite 10s cubic-bezier(0, 0.94, 0.49, 0.97);
  }

  &--left {
    top: 228px;
    left: 94px;
  }

  &--right {
    top: 241px;
    left: 240px;
  }
}

@keyframes eye {
  0% { transform: scaleY(.1); }
  5% { transform: scaleY(1); }
}

.c-hatsuneMiku-mouth {
  width: 48px;
  height: 10px;
  position: absolute;
  background-position: -539px -237px;
  top: 363px;
  left: 170px;
}

.c-hatsuneMiku-hair {
  &--left,
  &--right {
    animation: hair alternate infinite 1s linear;
    position: absolute;
  }

  &--left {
    width: 215px;
    height: 885px;
    background-position: -624px -2px;
    top: 70px;
    left: -142px;
    transform-origin: top right;
    z-index: -1;
  }

  &--right {
    width: 167px;
    height: 922px;
    background-position: -857px -2px;
    top: 60px;
    left: 342px;
    transform-origin: top left;
    z-index: 10;
  }
}

@keyframes hair {
  0% { transform: rotateZ(1deg); }
  100% { transform: rotateZ(-1deg); }
}

.c-hatsuneMiku-bodyWrap {
  background: none !important;
  position: absolute;
  left: 210px;
  top: 403px;
}

.c-hatsuneMiku-body {
  width: 320px;
  height: 400px;
  background-position: 0 515px;
  position: relative;
  z-index: 20;
}

.c-hatsuneMiku-tie {
  width: 79px;
  height: 266px;
  background-position: 598px -140px;
  top: 33px;
  position: absolute;
  left: 114px;
  transform-origin: 34px 0;
  animation: tie alternate infinite 1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  z-index: 25;
}

@keyframes tie {
  0% { transform: rotateZ(-2deg); }
  100% { transform: rotateZ(2deg); }
}

.c-hatsuneMiku-arm {
  &--left,
  &--right {
    width: 165px;
    height: 302px;
    background-position: 705px -419px;
    position: absolute;
    transform-origin: 0 0;
    z-index: 10;
  }

  &--left {
    left: 128px;
    top: 36px;
    transform: scaleX(-1);
    animation: left-arm alternate infinite 1s linear;
  }

  &--right {
    left: 181px;
    top: 34px;
    animation: right-arm alternate infinite 1s linear;
  }
}

@keyframes left-arm {
  0% { transform: scaleX(-1) rotateZ(-10deg); }
  100% { transform: scaleX(-1) rotateZ(-20deg); }
}

@keyframes right-arm {
  0% { transform: rotateZ(-10deg); }
  100% { transform: rotateZ(-20deg); }
}

.c-hatsuneMiku-foot {
  &--left,
  &--right {
    width: 88px;
    height: 331px;
    background-position: -491px 510px;
    position: absolute;
    z-index: 10;
    top: 250px;
  }

  &--left {
    left: 75px;
  }

  &--right {
    left: 145px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.