@import url(http://fonts.googleapis.com/css?family=Bangers);

.knuckles { position: absolute; bottom: 112px; margin-left: 90px; width: 72px; height: 80px; background-image: url(../images/knuckles.png); }



/* stance */  /* -17 13 starting */   /*-89 13*/  /*-163  14*/
.knucklesStance { 
    -webkit-animation: knucklesStance steps(3) 0.6s infinite;
     -moz-animation: knucklesStance steps(3) 0.6s infinite;
      -ms-animation: knucklesStance steps(3) 0.6s infinite;
       animation: knucklesStance steps(3) 0.6s infinite;
    }

@-webkit-keyframes knucklesStance { from { background-position: -17px 13px; }
  to { background-position: -235px 14px; } }

@-moz-keyframes knucklesStance { from { background-position: -17px 13px; }
  to { background-position: -235px 14px; } }

@-ms-keyframes knucklesStance { from { background-position: -17px 13px; }
  to { background-position: -235px 14px; } }

@keyframes knucklesStance { from { background-position: -17px 13px; }
  to { background-position: -235px 14px; } }


/* jumping */
.knucklesJump {
   -webkit-transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
   -moz-transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
    -ms-transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
     transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
      bottom: 225px; 
       -webkit-animation: knucklesJump steps(1) 1s infinite;
        -moz-animation: knucklesJump steps(1) 1s infinite;
         -ms-animation: knucklesJump steps(1) 1s infinite;
          animation: knucklesJump steps(1) 1s infinite;
       }

.knucklesJump.down { bottom: 112px; }

@-webkit-keyframes knucklesJump { from { background-position: -370px -90px; }
  to { background-position: -200px 100px; } }

@-moz-keyframes knucklesJump { from { background-position: -370px -90px; }
  to { background-position: -200px 100px; } }

@-ms-keyframes knucklesJump { from { background-position: -370px -90px; }
  to { background-position: -200px 100px; } }

@keyframes knucklesJump { from { background-position: -370px -90px; }
  to { background-position: -200px 100px; } }


  /* punch */
.knucklesPunch { 
  -webkit-animation: knucklesPunch steps(1) 0.15s infinite;
   -moz-animation: knucklesPunch steps(1) 0.15s infinite;
    -ms-animation: knucklesPunch steps(1) 0.15s infinite;
     animation: knucklesPunch steps(1) 0.15s infinite;
    }

@-webkit-keyframes knucklesPunch { from { background-position: -290px -82px; }
  to { background-position: -210px -160px; } }

@-moz-keyframes knucklesPunch { from { background-position: -290px -82px; }
  to { background-position: -210px -160px; } }

@-ms-keyframes knucklesPunch { from { background-position: -290px -82px; }
  to { background-position: -210px -160px; } }

@keyframes knucklesPunch { from { background-position: -290px -82px; }
  to { background-position: -210px -160px; } }