/* a little more explanations on how it works on my blog : http://front-back.com/2013/01/animate-png-sprites-with-css3-animations */

/* 
 * mixins 
*/
@mixin transform($params) { 
    -webkit-transform:$params;
       -moz-transform:$params;
        -ms-transform:$params;
            transform:$params;
}
@mixin transition($params) { 
    -webkit-transition:$params;
       -moz-transition:$params;
        -ms-transition:$params;
            transition:$params;
}
@mixin animation($params) { 
    -webkit-animation:$params;
       -moz-animation:$params;
        -ms-animation:$params;
            animation:$params;
}
@mixin keyframes($name) { 
    @-webkit-keyframes $name { @content }
    @-moz-keyframes $name { @content }
    @-ms-keyframes $name { @content }
    @keyframes $name { @content }
}
@mixin anim($animName, $steps, $animNbr, $animParams){
    .#{$animName} { 
        @content;
        @include animation($animName steps($steps) $animParams); 
    }
    @include keyframes($animName) {
        from { background-position:0px (-$spriteHeight * ($animNbr - 1)); }
          to { background-position:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); }
    }
}

/* element who's going to receive this class will be mirrored */
.flip { @include transform(scaleX(-1)); }

/* sprite tile dimensions */
$spriteWidth:70px;
$spriteHeight:80px;

/* ken */
.ken { 
    position:absolute; bottom:112px; margin-left:150px;
    width:$spriteWidth; height:$spriteHeight; 
    background-image:url('http://front-back.com/wp-content/uploads/2013/01/ken.png'); 
  
  /* other sprites preloading */
  &:before { 
    content:'';
    background: url('http://front-back.com/wp-content/uploads/2013/01/ken-tatsumaki-senpuu-kyaku.png') no-repeat; 
  }
  &:after { 
    content:'';
    background: url('http://front-back.com/wp-content/uploads/2013/01/ken-shoryuken.png') no-repeat;
  }
}

/* ken's fireball */
@include anim($animName:fireball, $steps:2, $animNbr:5, $animParams:.15s infinite) {
    @extend .ken;
    position:absolute; left:100%; bottom:0px;
    margin-left:0; /* default margin-left */
    background-position:140px 320px; /* default background position */
    @include transition(margin 8s linear); 
    &:before { left:25px; right:25px; }
    &.moving { margin-left:4000px; } /* triggering the movement with this class */
}
/* ken's fireball impact explosion */
@include anim($animName:explode, $steps:4, $animNbr:6, $animParams:.5s 1);
/* stance */
@include anim($animName:stance, $steps:4, $animNbr:2, $animParams:.5s infinite);
/* hadoken - must be declared AFTER .stance */
@include anim($animName:hadoken, $steps:4, $animNbr:1, $animParams:.5s infinite);
/* punch */
@include anim($animName:punch, $steps:3, $animNbr:3, $animParams:.15s infinite);
/* walking */
@include anim($animName:walk, $steps:5, $animNbr:4, $animParams:.5s infinite);
/* kick */
@include anim($animName:kick, $steps:5, $animNbr:7, $animParams:.5s infinite);
/* reverse kick */
@include anim($animName:reversekick, $steps:5, $animNbr:8, $animParams:.5s infinite);
/* kneel down */
@include anim($animName:kneel, $steps:1, $animNbr:10, $animParams:.2s infinite);
/* jump */
@include anim($animName:jump, $steps:7, $animNbr:9, $animParams:1s infinite) {
    @include transition(bottom .5s cubic-bezier(0.990, 0.005, 0.000, 0.420));
    bottom:225px;
    &.down { bottom:112px; }
}
/* shoryuken */
@include anim($animName:shoryuken, $steps:7, $animNbr:1, $animParams:1s infinite) {
    height:110px;
    background-image:url('http://front-back.com/wp-content/uploads/2013/01/ken-shoryuken.png');
    @include transition(bottom .5s cubic-bezier(0.990, 0.005, 0.000, 0.420));
    bottom:225px;
    &.down { bottom:112px; }
}
/* tatsumaki senpuu kyaku */
@include anim($animName:tatsumaki, $steps:13, $animNbr:1, $animParams:2s infinite) {
    height:110px;
    background-image:url('http://front-back.com/wp-content/uploads/2013/01/ken-tatsumaki-senpuu-kyaku.png');
    @include transition(bottom .2s cubic-bezier(0.990, 0.005, 0.000, 0.420));
    bottom:132px;
    &.down { bottom:112px; }
}

.commands {
  h1 { margin-top:0; font-size:14px; }
  margin-left:450px;
  font-size:12px; padding:15px; 
  i { padding:0px 4px; font-style:normal; font-weight:bold; outline:1px solid pink; }
  button + button { white-space:nowrap; }
  
}

.stage {
  position:absolute; top:0; width:450px; height:330px;
  background:url('http://front-back.com/wp-content/uploads/2013/01/sf2-bg.jpg') no-repeat 0px -100px;
  background-size:contain;
  float:left; margin-right:20px; 
}
body { margin:0px; padding:0; }