Character Pose Sample

by Keith Jeter

HTML

<div class="bodd">
  <!-- head -->
  <div class="hed centre"></div>
  <div class="nek centre"></div>

  <!-- left arm -->
  <div class="arm_l"></div>
  <div class="arm_jnt_l"></div>
  <div class="arm_l_b"></div>
  <div class="hand_l"></div>

  <!-- right arm -->
  <div class="arm_r"></div>
  <div class="arm_jnt_r"></div>
  <div class="arm_r_b"></div>
  <div class="hand_r"></div>

  <!-- mid section -->
  <div class="chest_jnt centre"></div>
  <div class="chest centre"></div>
  <div class="abb centre"></div>
  <div class="bott centre"></div>

  <!-- left leg -->
  <div class="leg_jnt_l"></div>
  <div class="leg_l"></div>
  <div class="leg_jnt_l_b"></div>
  <div class="leg_l_b"></div>
  <div class="foot_l"></div>

  <!-- right leg -->
  <div class="leg_jnt_r"></div>
  <div class="leg_r"></div>
  <div class="leg_jnt_r_b"></div>
  <div class="leg_r_b"></div>
  <div class="foot_r"></div>
</div>

CSS

/*--  START CSS ANIMATIONS  --*/


/*--  HEAD ANIMATION  --*/

@-webkit-keyframes hedd {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 4px;
  }
  100% {
    margin-top: 0;
  }
}

@-moz-keyframes hedd {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 4px;
  }
  100% {
    margin-top: 0;
  }
}

@-o-keyframes hedd {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 4px;
  }
  100% {
    margin-top: 0;
  }
}

@keyframes hedd {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 6px;
  }
  100% {
    margin-top: 0;
  }
}


/*--  TORSO ANIMATION  --*/

@-webkit-keyframes tor {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 3px;
  }
  100% {
    margin-top: 0px;
  }
}

@-moz-keyframes tor {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 3px;
  }
  100% {
    margin-top: 0px;
  }
}

@-o-keyframes tor {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 3px;
  }
  100% {
    margin-top: 0px;
  }
}

@keyframes tor {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 3px;
  }
  100% {
    margin-top: 0px;
  }
}


/*--  LARM ANIMATION  --*/

@-webkit-keyframes rot1 {
  0% {
    margin-top: 0px;
    transform: rotate(0deg);
  }
  50% {
    margin-top: 3px;
    transform: rotate(3deg);
  }
  100% {
    margin-top: 0px;
    transform: rotate(0deg);
  }
}

@-moz-keyframes rot1 {
  0% {
    margin-top: 0px;
    transform: rotate(0deg);
  }
  50% {
    margin-top: 3px;
    transform: rotate(3deg);
  }
  100% {
    margin-top: 0px;
    transform: rotate(0deg);
  }
}

@-o-keyframes rot1 {
  0% {
    margin-top: 0px;
    transform: rotate(0deg);
  }
  50% {
    margin-top: 3px;
    transform: rotate(3deg);
  }
  100% {
    margin-top: 0px;
    transform: rotate(0deg);
  }
}

@keyframes rot1 {
  0% {
    margin-top: 0px;
    transform: rotate(0deg);
  }
  50% {
    margin-top: 3px;
    transform: rotate(3deg);
  }
  100% {
    margin-top: 0px;
    transform: rotate(0deg);
  }
}


/*--  LARM-B ANIMATION  --*/

@-webkit-keyframes rot2 {
 ...