.wrapper
  .human
    .human__head
      .human__face
        span
        .human__hair
          div
          div
        .human__hood
      .human__body
        div
          div
        .human__reg.human__reg--left
          div
            div
              div
        .human__reg.human__reg--right
          div
            div
              div

        .human__arm.human__arm--left
          div
            div
              div
        .human__arm.human__arm--right
          div
            div
              div

  .board
    .board__body.board__body--back
      .board__side.board__side--left
      .board__center
      .board__side.board__side--right

    .board__body.board__body--front
      .board__side.board__side--left
      .board__center
      .board__side.board__side--right

    .board__tires
      - for (var i = 0; i < 4; i++)
        .board__tire
          span
  .shadow

  .wind
    - for (var i = 0; i < 5; i++)
      div
View Compiled 
// color
$color-bg: #9FDBD1;
$color-board-front: #525655;
$color-board-back: #FFC038;
$color-human: #254f5f;
$color-cap: #254f5f;
$color-hair: #3d2b37;
$color-clothes: #DC5551;
$color-pants: #2E2230;
$color-skin: #e7c3aa;
$color-shoes: #DC5551;
$color-tire: #59BBD0;
$color-shadow: #2E2230;
$color-black: #2E2230;

// board
$board-center-size: 150;
$board-side-size: 40;
$board-height: 30;
$move: 5s;

// human
$head1: 60px;
$face: 50px;
$body1: 80px;
$body2: 40px;
$reg-width: 25px;
$reg-height1: 80px;
$reg-height2: 60px;
$reg-height3: 50px;
$arm-width: 20px;
$arm-height1: 60px;
$arm-height2: 50px;
$arm-height3: 50px;
$face-index: 10;
$body-index: 5;

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

@mixin prefixes($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
    #{$prefix}#{$property}: $value;
  }
}

.wrapper {
  position: absolute;
  width: 150px;
  height: 300px;
  margin: auto;
  top: calc(50% - 150px);
  left: calc(50% - 50px);
}

.board {
  $base: &;
  position: absolute;
  left: 15px;
  bottom: 48px;
  z-index: 10;
  @include prefixes(transform-style, preserve-3d);
  @include animation(board_movie $move linear infinite);

  &__body {
    width: 100%;
    height: 100%;
    @include prefixes(transform-style, preserve-3d);

    &--front {
      z-index: 100;
      @include prefixes(transform, translateY(0));
      @include animation(board_front $move linear infinite);

      #{$base}__center {
        background: $color-board-front;
      }

      #{$base}__side {
        background: $color-board-front;
      }
    }

    &--back {
      @include prefixes(transform, translateY(1px));
      @include animation(board_back $move linear infinite);
      z-index: 5;

      #{$base}__center {
        background: $color-board-back;
      }

      #{$base}__side {
        background: $color-board-back;
      }
    }
  }

  &__center {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: $board-center-size + px;
    height: $board-height + px;
    background: $color-board-front;
    overflow: hidden;
    text-align: center;
    @include prefixes(transform-style, preserve-3d);
    @include prefixes(justify-content, center);
    @include prefixes(transform, rotateX(-90deg));
  }

  &__side {
    position: absolute;
    top: -25px;
    left: 0;
    width: $board-height + px;
    height: $board-side-size + px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    text-align: center;
    @include prefixes(justify-content, center);
    @include prefixes(transform-origin, bottom);

    &--right {
      border-radius: 50% 50% 0 0;
      @include prefixes(
        transform,
        rotateY(90deg) translateZ(135px) rotateX(-65deg)
      );
    }

    &--left {
      border-radius: 50% 50% 0 0;
      @include prefixes(
        transform,
        rotateY(90deg) translateZ(-15px) rotateX(65deg)
      );
    }
  }

  &__tires {
    position: absolute;
    top: 3px;
    z-index: 1;
    @include prefixes(transform-style, preserve-3d);
  }

  &__tire {
    position: absolute;
    top: 15px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: $color-tire;
    z-index: 5;

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: $color-tire;
    }

    span {
      position: absolute;
      top: 2px;
      left: 1px;
      width: 15px;
      height: 15px;
      border-left: 2px solid #D3D3D3;
      border-right: 1px solid #D3D3D3;
      border-radius: 50%;
      @include animation(tire_rotate 0.3s linear infinite);

      &:before {
        top: 6px;
        right: 4px;
        background: #525655;
        width: 5px;
        height: 5px;
        border-radius: 90% 30%;
      }
    }

    &:nth-of-type(1) {
      @include prefixes(transform, translateZ(-5px));
    }

    &:nth-of-type(2) {
      @include prefixes(transform, translateZ(10px));
    }

    &:nth-of-type(3) {
      left: 120px;
      @include prefixes(transform, translateZ(-5px));
    }

    &:nth-of-type(4) {
      left: 120px;
      @include prefixes(transform, translateZ(10px));
    }
  }
}

.human {
  top: 0;
  left: 0;
  width: 120px;
  height: 285px;
  z-index: 1;
  @include prefixes(transform-style, preserve-3d);
  @include prefixes(transform, scale(0.8));

  // head
  &__head {
    top: 0;
    left: calc(100% - 120px / 2);
    width: 50px;
    height: $head1;
  }

  // face
  &__face {
    top: 17px;
    left: 0px;
    width: 50px;
    height: $face;
    background: $color-skin;
    border-radius: 50%;
    z-index: $face-index;
    @include prefixes(transform-origin, bottom center);
    @include animation(jump_face $move linear infinite);

    // eye
    span {
      position: absolute;
      top: 34px;
      left: 22px;
      width: 17px;
      @include prefixes(transform, rotate(10deg));

      &:before,
      &:after {
        top: 0;
        background: $color-black;
        width: 3px;
        height: 3px;
      }

      &:before {
        left: 0;
      }

      &:after {
        right: 0;
      }
    }

    // cap
    &:before {
      top: -2px;
      left: 6px;
      width: 50px;
      height: 32px;
      background: $color-cap;
      border-radius: 50% 50% 0 0;
      @include prefixes(transform, rotate(10deg));
    }
  }

  // hood
  &__hood {
    position: absolute;
    top: 10px;
    left: -5px;

    &:before {
      top: -28px;
      left: -6px;
      width: 49px;
      height: 87px;
      border-top: 31px solid $color-clothes;
      border-radius: 50%;
      @include prefixes(transform, rotate(-23deg));
    }

    &:after {
      top: -5px;
      left: 8px;
      width: 70px;
      height: 62px;
      border-left: 23px solid $color-clothes;
      border-radius: 0 0 0 60%;
      @include prefixes(transform, rotate(36deg));
    }
  }

  // hair
  &__hair {
    position: absolute;
    top: 34px;
    right: 5px;

    > div {
      border-radius: 50%;
      &:before,
      &:after {
        height: 44px;
        border-top: 13px solid $color-hair;
        border-radius: 50%;
      }
    }

    > div:nth-of-type(1) {
      top: -1px;
      left: -10px;
      width: 13px;
      height: 46px;
      border-top: 16px solid $color-hair;
      @include prefixes(transform, rotate(19deg));

      &:before {
        top: -9px;
        left: 0px;
        width: 12px;
        @include prefixes(transform, rotate(6deg));
      }

      &:after {
        top: -5px;
        left: -3px;
        width: 13px;
        @include prefixes(transform, rotate(10deg));
      }
    }

    > div:nth-of-type(2) {
      top: -8px;
      left: -46px;
      width: 15px;
      height: 44px;
      border-top: 13px solid $color-hair;
      @include prefixes(transform, rotate(5deg));

      &:before {
        top: -3px;
        left: -1px;
        width: 9px;
        @include prefixes(transform, rotate(5deg));
      }

      &:after {
        top: -3px;
        left: 1px;
        width: 13px;
        @include prefixes(transform, rotate(10deg));
      }
    }
  }

  &__body {
    top: $head1;
    left: -12px;
    width: 50px;
    height: $body1 + $body2;
    z-index: $body-index;
    @include animation(jump_body $move linear infinite);

    > div:nth-of-type(1) {
      top: 0;
      left: 0;
      width: 55px;
      height: $body1;
      background: $color-clothes;
      @include prefixes(transform, rotate(10deg));
      @include prefixes(transform-origin, top center);
      border-radius: 30% 50% 0 0;
      z-index: $body-index;

      > div {
        top: $body1 - 10px;
        left: 0;
        width: 55px;
        height: $body2 - 20px;
        background: $color-clothes;
        @include prefixes(transform, rotate(3deg));
        @include animation(jump_body2 $move linear infinite);
      }
    }
  }

  // reg
  &__reg {
    top: $body1 + $body2 - 40px;
    width: 25px;
    height: $reg-height1 + $reg-height2 + $reg-height3;
    @include prefixes(transform-origin, top center);

    > div {
      top: 0;
      left: 0;
      width: 25px;
      height: 25px;
      background: $color-pants;
      border-radius: 50%;
      @include prefixes(transform-origin, center);

      &:before {
        top: 0;
        left: 0;
        width: 25px;
        height: $reg-height1;
        background: $color-pants;
        border-radius: 10px 10px 0 0;
      }

      > div {
        top: $reg-height1 - $reg-width / 2;
        left: 0;
        width: $reg-width;
        height: $reg-width;
        background: $color-pants;
        border-radius: 50%;
        @include prefixes(transform-origin, center);

        &:before {
          top: $reg-height2 + 10;
          left: 4px;
          width: 12px;
          height: 20px;
          background: #254f5f;
        }

        &:after {
          top: $reg-width / 2;
          left: 0;
          width: $reg-width;
          height: $reg-height2;
          background: $color-pants;
          border-radius: 3px;
        }

        > div {
          position: absolute;
          top: $reg-height2 + 20px;
          left: 2px;
          width: 20px;
          height: 20px;
          background: $color-shoes;

          &:before,
          &:after {
            width: 0;
            height: 0;
            border-bottom: 0px solid transparent;
          }

          &:before {
            top: 5px;
            right: -19px;
            border-left: 20px solid $color-shoes;
            border-top: 15px solid transparent;
            border-radius: 0 0 90% 0;
          }

          &:after {
            top: 0;
            left: -4px;
            border-right: 5px solid $color-shoes;
            border-top: 20px solid transparent;
            border-radius: 0 0 0 50%;
          }
        }
      }
    }

    &--left {
      left: -10px;

      > div {
        @include prefixes(transform, rotate(39deg));
        @include animation(jump_reg_left1 $move linear infinite);

        > div {
          @include prefixes(transform, rotate(-37deg));
          @include animation(jump_reg_left2 $move linear infinite);

          > div {
            top: $reg-height2 + 22px;
            @include prefixes(transform, rotate(0));
            @include animation(jump_reg_left3 $move linear infinite);
          }
        }
      }
    }

    &--right {
      right: 20px;

      > div {
        @include prefixes(transform, rotate(-35deg));
        @include animation(jump_reg_right1 $move linear infinite);

        > div {
          @include prefixes(transform, rotate(60deg));
          @include animation(jump_reg_right2 $move linear infinite);

          > div {
            top: $reg-height2 + 25px;
            @include prefixes(transform, rotate(-20deg));
            @include animation(jump_reg_right3 $move linear infinite);
          }
        }
      }
    }
  }

  // arm
  &__arm {
    top: 0;
    width: 25px;
    height: $arm-height1 + $arm-height2 + $arm-height3;
    @include prefixes(transform-origin, top center);

    > div {
      top: 0;
      left: 0;
      width: $arm-width;
      height: $arm-width;
      background: $color-clothes;
      border-radius: 50%;
      @include prefixes(transform-origin, center);
      transform: rotate(25deg);

      &:before {
        top: $arm-width / 2;
        left: 0;
        width: $arm-width;
        height: $arm-height1;
        background: $color-clothes;
      }

      &:after {
        top: 0;
        right: -13px;
        width: 0;
        height: 0;
        border-left: 15px solid $color-clothes;
        border-top: 0px solid transparent;
        border-bottom: $arm-height1 solid transparent;
      }

      > div {
        top: $arm-height1;
        left: 0;
        width: $arm-width;
        height: $arm-width;
        background: $color-clothes;
        border-radius: 50%;
        @include prefixes(transform-origin, center);
        transform: rotate(-13deg);

        &:after {
          top: $arm-width / 2;
          left: 0;
          width: $arm-width;
          height: $arm-height2;
          background: $color-clothes;
          border-radius: 3px;
        }

        > div {
          top: $arm-height2;
          left: 0;
          width: 18px;
          height: 30px;
          border-radius: 50%;
          background: $color-skin;

          &:before {
            top: 6px;
            left: 6px;
            width: 8px;
            height: 18px;
            border-radius: 50%;
            background: $color-skin;
            @include prefixes(transform, rotate(-38deg));
          }
        }
      }
    }

    &--left {
      z-index: 10;

      > div {
        @include prefixes(transform, rotate(47deg));
        @include animation(jump_arm_left1 $move linear infinite);

        > div {
          @include prefixes(transform, rotate(-20deg));
          @include animation(jump_arm_left2 $move linear infinite);
        }
      }
    }

    &--right {
      right: -15px;
      top: 6px;
      left: 33px;
      z-index: -1;

      > div {
        @include prefixes(transform, rotate(-40deg));
        @include animation(jump_arm_right1 $move linear infinite);

        &:after {
          content: none;
        }

        > div {
          @include prefixes(transform, rotate(-50deg));
          @include animation(jump_arm_right2 $move linear infinite);
        }
      }
    }
  }

  div {
    position: absolute;
    @include prefixes(box-sizing, border-box);

    &:before,
    &:after {
      @include prefixes(transform-origin, top center);
      @include prefixes(box-sizing, border-box);
    }
  }
}

.shadow {
  position: absolute;
  bottom: 8px;
  left: -15px;
  width: 173px;
  height: 12px;
  background: $color-shadow;
  border-radius: 50%;
  @include prefixes(transform-origin, center);
  @include prefixes(transform, scale(1.0) translate(-30px, 0) rotateX(0) rotateZ(0));
  @include animation(shadow_move $move linear infinite);

}

.wind {
  position: absolute;
  bottom: 0;
  z-index: -1;
  right: 100%;
  height: 100%;
  margin-right: 100px;

  div {
    position: absolute;
    background: #fff;
    border-radius: 3px;
    height: 10px;

    &:nth-of-type(1) {
      bottom: 10px;
      right: 0;
      width: 20px;
      @include animation(wind 1s linear infinite);
    }

    &:nth-of-type(2) {
      bottom: 20px;
      right: 0;
      width: 30px;
      @include animation(wind 2.5s linear infinite);
    }

    &:nth-of-type(3) {
      bottom: 30px;
      right: 0;
      width: 40px;
      @include animation(wind 2s linear infinite);
    }

    &:nth-of-type(4) {
      bottom: 40px;
      right: 0;
      width: 60px;
      @include animation(wind 2s linear infinite);
    }

    &:nth-of-type(5) {
      bottom: 50px;
      right: 0;
      width: 40px;
      @include animation(wind 1.5s linear infinite);
    }
  }
}

@include keyframes(wind) {
  0% {
    @include prefixes(transform, translateX(100%));
    opacity: 1;
  }
  100% {
    @include prefixes(transform, translateX(-400%));
    opacity: 0;
  }
}

@include keyframes(tire_rotate) {
  0% { @include prefixes(transform, rotate(0)); }
  100% { @include prefixes(transform, rotate(360deg)); }
}

@include keyframes(shadow_move) {
  0% { @include prefixes(transform, translate(-30px, 0) scale(1.0)); }
  10% { @include prefixes(transform, translate(20px, 0) scale(1.0)); }
  20% { @include prefixes(transform, translate(-30px, 0) scale(1.0)); }
  50% { @include prefixes(transform, translate(-30px, 0) scale(1.0)); }
  55% { @include prefixes(transform, translate(-30px, 0) scale(0.8)); }
  63% { @include prefixes(transform, translate(-30px, 0) scale(0.8)); }
  65% { @include prefixes(transform, translate(-30px, 0) scale(1.0)); }
  70% { @include prefixes(transform, translate(-50px, 0) scale(1.0)); }
  90% { @include prefixes(transform, translate(-30px, 0) scale(1.0)); }
  100% { @include prefixes(transform, translate(-30px, 0) scale(1.0)); }
}


@include keyframes(board_movie) {
  0% { @include prefixes(transform, scale(0.8) translate(-30px, 0) rotateX(-10deg) rotateZ(0)); }
  10% { @include prefixes(transform, scale(0.8) translate(20px, 0) rotateX(-10deg) rotateZ(0)); }
  20% { @include prefixes(transform, scale(0.8) translate(-30px, 0) rotateX(-10deg) rotateZ(0)); }
  50% { @include prefixes(transform, scale(0.8) translate(-30px, 0) rotateX(-10deg) rotateZ(0)); }
  55% { @include prefixes(transform, scale(0.8) translate(-30px, 0) rotateX(360deg) rotateZ(-4deg)); }
  63% { @include prefixes(transform, scale(0.8) translate(-30px, 0)rotateX(-10deg) rotateZ(-15deg)); }
  65% { @include prefixes(transform, scale(0.8) translate(-30px, 0) rotateX(-10deg) rotateZ(0)); }
  70% { @include prefixes(transform, scale(0.8) translate(-50px, 0) rotateX(-10deg) rotateZ(0)); }
  90% { @include prefixes(transform, scale(0.8) translate(-30px, 0) rotateX(-10deg) rotateZ(0)); }
  100% { @include prefixes(transform, scale(0.8) translate(-30px, 0) rotateX(-10deg) rotateZ(0)); }
}

@include keyframes(board_front) {
  0% { @include prefixes(transform, translateY(0)); }
  46% { @include prefixes(transform, translateY(0)); }
  48% { @include prefixes(transform, translateY(3px)); }
  55% { @include prefixes(transform, translateY(0)); }
  65% { @include prefixes(transform, translateY(0)); }
  68% { @include prefixes(transform, translateY(3px)); }
  70% { @include prefixes(transform, translateY(0)); }
  100% { @include prefixes(transform, translateY(0)); }
}

@include keyframes(board_back) {
  0% { @include prefixes(transform, translateY(1px)); }
  46% { @include prefixes(transform, translateY(1px)); }
  48% { @include prefixes(transform, translateY(4px)); }
  55% { @include prefixes(transform, translateY(1px)); }
  65% { @include prefixes(transform, translateY(1px)); }
  68% { @include prefixes(transform, translateY(4px)); }
  70% { @include prefixes(transform, translateY(1px)); }
  100% { @include prefixes(transform, translateY(1px)); }
}

@include keyframes(jump_reg_right1) {
  0% { @include prefixes(transform, rotate(-35deg)); }
  10% { @include prefixes(transform, rotate(-46deg)); }
  20% { @include prefixes(transform, rotate(-35deg)); }
  45% { @include prefixes(transform, rotate(-35deg)); }
  50% { @include prefixes(transform, rotate(-60deg)); }
  55% { @include prefixes(transform, rotate(-110deg)); }
  58% { @include prefixes(transform, rotate(-130deg)); }
  65% { @include prefixes(transform, rotate(-60deg)); }
  70% { @include prefixes(transform, rotate(-27deg)); }
  90% { @include prefixes(transform, rotate(-35deg)); }
  100% { @include prefixes(transform, rotate(-35deg)); }
}

@include keyframes(jump_reg_right2) {
  0% { @include prefixes(transform, rotate(60deg)); }
  10% { @include prefixes(transform, rotate(43deg)); }
  20% { @include prefixes(transform, rotate(60deg)); }
  45% { @include prefixes(transform, rotate(60deg)); }
  50% { @include prefixes(transform, rotate(100deg)); }
  60% { @include prefixes(transform, rotate(112deg)); }
  65% { @include prefixes(transform, rotate(100deg)); }
  70% { @include prefixes(transform, rotate(60deg)); }
  90% { @include prefixes(transform, rotate(60deg)); }
  100% { @include prefixes(transform, rotate(60deg)); }
}

@include keyframes(jump_reg_right3) {
  0% { @include prefixes(transform, rotate(-20deg)); }
  10% { @include prefixes(transform, rotate(4deg)); }
  20% { @include prefixes(transform, rotate(-20deg)); }
  40% { @include prefixes(transform, rotate(-20deg)); }
  50% { @include prefixes(transform, rotate(-32deg)); }
  60% { @include prefixes(transform, rotate(-5deg)); }
  65% { @include prefixes(transform, rotate(-32deg)); }
  90% { @include prefixes(transform, rotate(-26deg)); }
  100% { @include prefixes(transform, rotate(-20deg)); }
}

@include keyframes(jump_reg_left1) {
  0% { @include prefixes(transform, rotate(39deg)); }
  10% { @include prefixes(transform, rotate(31deg)); }
  20% { @include prefixes(transform, rotate(39deg)); }
  45% { @include prefixes(transform, rotate(39deg)); }
  50% { @include prefixes(transform, rotate(74deg)); }
  53% { @include prefixes(transform, rotate(120deg)); }
  58% { @include prefixes(transform, rotate(130deg)); }
  65% { @include prefixes(transform, rotate(74deg)); }
  70% { @include prefixes(transform, rotate(42deg)); }
  90% { @include prefixes(transform, rotate(39deg)); }
  100% { @include prefixes(transform, rotate(39deg)); }
}

@include keyframes(jump_reg_left2) {
  0% { @include prefixes(transform, rotate(-37deg)); }
  10% { @include prefixes(transform, rotate(-60deg)); }
  20% { @include prefixes(transform, rotate(-37deg)); }
  45% { @include prefixes(transform, rotate(-37deg)); }
  50% { @include prefixes(transform, rotate(-86deg)); }
  55% { @include prefixes(transform, rotate(-90deg)); }
  60% { @include prefixes(transform, rotate(-90deg)); }
  65% { @include prefixes(transform, rotate(-84deg)); }
  70% { @include prefixes(transform, rotate(-28deg)); }
  85% { @include prefixes(transform, rotate(-37deg)); }
  100% { @include prefixes(transform, rotate(-37deg)); }
}

@include keyframes(jump_reg_left3) {
  0% { @include prefixes(transform, rotate(0)); }
  10% { @include prefixes(transform, rotate(17deg)); }
  20% { @include prefixes(transform, rotate(0)); }
  40% { @include prefixes(transform, rotate(0)); }
  50% { @include prefixes(transform, rotate(11deg)); }
  60% { @include prefixes(transform, rotate(5deg)); }
  65% { @include prefixes(transform, rotate(11deg)); }
  90% { @include prefixes(transform, rotate(-10deg)); }
  100% { @include prefixes(transform, rotate(0)); }
}

@include keyframes(jump_arm_left1) {
  0% { @include prefixes(transform, rotate(7deg)); }
  10% { @include prefixes(transform, rotate(10deg)); }
  20% { @include prefixes(transform, rotate(30deg)); }
  45% { @include prefixes(transform, rotate(10deg)); }
  49% { @include prefixes(transform, rotate(10deg)); }
  53% { @include prefixes(transform, rotate(100deg)); }
  63% { @include prefixes(transform, rotate(110deg)); }
  70% { @include prefixes(transform, rotate(7deg)); }
  90% { @include prefixes(transform, rotate(47deg)); }
  100% { @include prefixes(transform, rotate(7deg)); }
}

@include keyframes(jump_arm_left2) {
  0% { @include prefixes(transform, rotate(-80deg)); }
  45% { @include prefixes(transform, rotate(-30deg)); }
  49% { @include prefixes(transform, rotate(-20deg)); }
  53% { @include prefixes(transform, rotate(-10deg)); }
  80% { @include prefixes(transform, rotate(-50deg)); }
  100% { @include prefixes(transform, rotate(-80deg)); }
}

@include keyframes(jump_arm_right1) {
  0% { @include prefixes(transform, rotate(7deg)); }
  10% { @include prefixes(transform, rotate(-40deg)); }
  20% { @include prefixes(transform, rotate(-20deg)); }
  45% { @include prefixes(transform, rotate(-20deg)); }
  49% { @include prefixes(transform, rotate(-10deg)); }
  53% { @include prefixes(transform, rotate(-90deg)); }
  63% { @include prefixes(transform, rotate(-100deg)); }
  70% { @include prefixes(transform, rotate(7deg)); }
  90% { @include prefixes(transform, rotate(-30deg)); }
  100% { @include prefixes(transform, rotate(7deg)); }
}

@include keyframes(jump_arm_right2) {
  0% { @include prefixes(transform, rotate(7deg)); }
  10% { @include prefixes(transform, rotate(10deg)); }
  20% { @include prefixes(transform, rotate(20deg)); }
  45% { @include prefixes(transform, rotate(0)); }
  49% { @include prefixes(transform, rotate(30deg)); }
  53% { @include prefixes(transform, rotate(40deg)); }
  63% { @include prefixes(transform, rotate(30deg)); }
  70% { @include prefixes(transform, rotate(7deg)); }
  90% { @include prefixes(transform, rotate(-50deg)); }
  100% { @include prefixes(transform, rotate(7deg)); }
}

@include keyframes(jump_body) {
  0% { @include prefixes(transform, translate(0, 0)); }
  45% { @include prefixes(transform, translate(0, 0)); }
  50% { @include prefixes(transform, translate(0, 30px)); }
  60% { @include prefixes(transform, translate(0, -25px)); }
  65% { @include prefixes(transform, translate(0, 30px)); }
  70% { @include prefixes(transform, translate(0, 0)); }
  100% { @include prefixes(transform, translate(0, 0)); }
}

@include keyframes(jump_body2) {
  0% { height: $body2 - 20px; }
  50% { height: $body2 - 20px; }
  55% { height: $body2 - 25px; }
  63% { height: $body2 - 25px; }
  68% { height: $body2 - 18px; }
  70% { height: $body2 - 20px; }
  100% { height: $body2 - 20px; }
}

@include keyframes(jump_face) {
  0% { @include prefixes(transform, rotate(-13deg) translate(0, 0)); }
  45% { @include prefixes(transform, rotate(-13deg) translate(0, 0)); }
  50% { @include prefixes(transform, rotate(0) translate(0, 30px)); }
  60% { @include prefixes(transform, rotate(0) translate(0, -25px)); }
  65% { @include prefixes(transform, rotate(0) translate(0, 30px)); }
  70% { @include prefixes(transform, rotate(-13deg) translate(0, 0)); }
  80% { @include prefixes(transform, rotate(0) translate(0, 0)); }
  100% { @include prefixes(transform, rotate(-13deg) translate(0, 0)); }
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  font-family: "Cute Font", cursive;
  margin: 0;
  background: $color-bg;
  @include prefixes(transform-style, preserve-3d);
  @include prefixes(perspective, 600px);
}

* {
  position: relative;
  &:before,
  &:after {
    position: absolute;
    content: "";
  }
}
View Compiled 
// （｀・ω・´）
// No images, Only CSS.
// Chrome recommended.
// twitter.com/study_dedede

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.