/* 
fork this demo on github: 
https://github.com/jkneb/street-fighter-css
*/
/* 
A little more explanations on how it works 
http://front-back.com/animate-png-sprites-with-css3-animations
*/
/* 
 * mixins 
*/
/* element who's going to receive this class will be mirrored */
.flip {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* sprite tile dimensions */
/* ken */
.ken, .fireball {
  position: absolute;
  bottom: 112px;
  margin-left: 150px;
  width: 70px;
  height: 80px;
  background-image: url("ken.png");
  /* other sprites preloading */
}
.ken:before, .fireball:before {
  content: '';
  background: url("ken-tatsumaki-senpuu-kyaku.png") no-repeat;
}
.ken:after, .fireball:after {
  content: '';
  background: url("ken-shoryuken.png") no-repeat;
}

/* ken's fireball */
.fireball {
  position: absolute;
  left: 100%;
  bottom: 0px;
  margin-left: 0;
  /* default margin-left */
  background-position: 140px 320px;
  /* default background position */
  -webkit-transition: margin 8s linear;
  -moz-transition: margin 8s linear;
  -ms-transition: margin 8s linear;
  transition: margin 8s linear;
  /* triggering the movement with this class */
  -webkit-animation: fireball steps(2) 0.15s infinite;
  -moz-animation: fireball steps(2) 0.15s infinite;
  -ms-animation: fireball steps(2) 0.15s infinite;
  animation: fireball steps(2) 0.15s infinite;
}
.fireball:before {
  left: 25px;
  right: 25px;
}
.fireball.moving {
  margin-left: 4000px;
}

@-webkit-keyframes fireball {
  from {
    background-position: 0px -320px;
  }

  to {
    background-position: -140px -320px;
  }
}
@-moz-keyframes fireball {
  from {
    background-position: 0px -320px;
  }

  to {
    background-position: -140px -320px;
  }
}
@-ms-keyframes fireball {
  from {
    background-position: 0px -320px;
  }

  to {
    background-position: -140px -320px;
  }
}
@keyframes fireball {
  from {
    background-position: 0px -320px;
  }

  to {
    background-position: -140px -320px;
  }
}
/* ken's fireball impact explosion */
.explode {
  -webkit-animation: explode steps(4) 0.5s 1;
  -moz-animation: explode steps(4) 0.5s 1;
  -ms-animation: explode steps(4) 0.5s 1;
  animation: explode steps(4) 0.5s 1;
}

@-webkit-keyframes explode {
  from {
    background-position: 0px -400px;
  }

  to {
    background-position: -280px -400px;
  }
}
@-moz-keyframes explode {
  from {
    background-position: 0px -400px;
  }

  to {
    background-position: -280px -400px;
  }
}
@-ms-keyframes explode {
  from {
    background-position: 0px -400px;
  }

  to {
    background-position: -280px -400px;
  }
}
@keyframes explode {
  from {
    background-position: 0px -400px;
  }

  to {
    background-position: -280px -400px;
  }
}
/* stance */
.stance {
  -webkit-animation: stance steps(4) 0.5s infinite;
  -moz-animation: stance steps(4) 0.5s infinite;
  -ms-animation: stance steps(4) 0.5s infinite;
  animation: stance steps(4) 0.5s infinite;
}

@-webkit-keyframes stance {
  from {
    background-position: 0px -80px;
  }

  to {
    background-position: -280px -80px;
  }
}
@-moz-keyframes stance {
  from {
    background-position: 0px -80px;
  }

  to {
    background-position: -280px -80px;
  }
}
@-ms-keyframes stance {
  from {
    background-position: 0px -80px;
  }

  to {
    background-position: -280px -80px;
  }
}
@keyframes stance {
  from {
    background-position: 0px -80px;
  }

  to {
    background-position: -280px -80px;
  }
}
/* hadoken - must be declared AFTER .stance */
.hadoken {
  -webkit-animation: hadoken steps(4) 0.5s infinite;
  -moz-animation: hadoken steps(4) 0.5s infinite;
  -ms-animation: hadoken steps(4) 0.5s infinite;
  animation: hadoken steps(4) 0.5s infinite;
}

@-webkit-keyframes hadoken {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -280px 0px;
  }
}
@-moz-keyframes hadoken {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -280px 0px;
  }
}
@-ms-keyframes hadoken {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -280px 0px;
  }
}
@keyframes hadoken {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -280px 0px;
  }
}
/* punch */
.punch {
  -webkit-animation: punch steps(3) 0.15s infinite;
  -moz-animation: punch steps(3) 0.15s infinite;
  -ms-animation: punch steps(3) 0.15s infinite;
  animation: punch steps(3) 0.15s infinite;
}

@-webkit-keyframes punch {
  from {
    background-position: 0px -160px;
  }

  to {
    background-position: -210px -160px;
  }
}
@-moz-keyframes punch {
  from {
    background-position: 0px -160px;
  }

  to {
    background-position: -210px -160px;
  }
}
@-ms-keyframes punch {
  from {
    background-position: 0px -160px;
  }

  to {
    background-position: -210px -160px;
  }
}
@keyframes punch {
  from {
    background-position: 0px -160px;
  }

  to {
    background-position: -210px -160px;
  }
}
/* walking */
.walk {
  -webkit-animation: walk steps(5) 0.5s infinite;
  -moz-animation: walk steps(5) 0.5s infinite;
  -ms-animation: walk steps(5) 0.5s infinite;
  animation: walk steps(5) 0.5s infinite;
}

@-webkit-keyframes walk {
  from {
    background-position: 0px -240px;
  }

  to {
    background-position: -350px -240px;
  }
}
@-moz-keyframes walk {
  from {
    background-position: 0px -240px;
  }

  to {
    background-position: -350px -240px;
  }
}
@-ms-keyframes walk {
  from {
    background-position: 0px -240px;
  }

  to {
    background-position: -350px -240px;
  }
}
@keyframes walk {
  from {
    background-position: 0px -240px;
  }

  to {
    background-position: -350px -240px;
  }
}
/* kick */
.kick {
  -webkit-animation: kick steps(5) 0.5s infinite;
  -moz-animation: kick steps(5) 0.5s infinite;
  -ms-animation: kick steps(5) 0.5s infinite;
  animation: kick steps(5) 0.5s infinite;
}

@-webkit-keyframes kick {
  from {
    background-position: 0px -480px;
  }

  to {
    background-position: -350px -480px;
  }
}
@-moz-keyframes kick {
  from {
    background-position: 0px -480px;
  }

  to {
    background-position: -350px -480px;
  }
}
@-ms-keyframes kick {
  from {
    background-position: 0px -480px;
  }

  to {
    background-position: -350px -480px;
  }
}
@keyframes kick {
  from {
    background-position: 0px -480px;
  }

  to {
    background-position: -350px -480px;
  }
}
/* reverse kick */
.reversekick {
  -webkit-animation: reversekick steps(5) 0.5s infinite;
  -moz-animation: reversekick steps(5) 0.5s infinite;
  -ms-animation: reversekick steps(5) 0.5s infinite;
  animation: reversekick steps(5) 0.5s infinite;
}

@-webkit-keyframes reversekick {
  from {
    background-position: 0px -560px;
  }

  to {
    background-position: -350px -560px;
  }
}
@-moz-keyframes reversekick {
  from {
    background-position: 0px -560px;
  }

  to {
    background-position: -350px -560px;
  }
}
@-ms-keyframes reversekick {
  from {
    background-position: 0px -560px;
  }

  to {
    background-position: -350px -560px;
  }
}
@keyframes reversekick {
  from {
    background-position: 0px -560px;
  }

  to {
    background-position: -350px -560px;
  }
}
/* kneel down */
.kneel {
  -webkit-animation: kneel steps(1) 0.2s infinite;
  -moz-animation: kneel steps(1) 0.2s infinite;
  -ms-animation: kneel steps(1) 0.2s infinite;
  animation: kneel steps(1) 0.2s infinite;
}

@-webkit-keyframes kneel {
  from {
    background-position: 0px -720px;
  }

  to {
    background-position: -70px -720px;
  }
}
@-moz-keyframes kneel {
  from {
    background-position: 0px -720px;
  }

  to {
    background-position: -70px -720px;
  }
}
@-ms-keyframes kneel {
  from {
    background-position: 0px -720px;
  }

  to {
    background-position: -70px -720px;
  }
}
@keyframes kneel {
  from {
    background-position: 0px -720px;
  }

  to {
    background-position: -70px -720px;
  }
}
/* jump */
.jump {
  -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: jump steps(7) 1s infinite;
  -moz-animation: jump steps(7) 1s infinite;
  -ms-animation: jump steps(7) 1s infinite;
  animation: jump steps(7) 1s infinite;
}
.jump.down {
  bottom: 112px;
}

@-webkit-keyframes jump {
  from {
    background-position: 0px -640px;
  }

  to {
    background-position: -490px -640px;
  }
}
@-moz-keyframes jump {
  from {
    background-position: 0px -640px;
  }

  to {
    background-position: -490px -640px;
  }
}
@-ms-keyframes jump {
  from {
    background-position: 0px -640px;
  }

  to {
    background-position: -490px -640px;
  }
}
@keyframes jump {
  from {
    background-position: 0px -640px;
  }

  to {
    background-position: -490px -640px;
  }
}
/* shoryuken */
.shoryuken {
  height: 110px;
  background-image: url("ken-shoryuken.png");
  -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: shoryuken steps(7) 1s infinite;
  -moz-animation: shoryuken steps(7) 1s infinite;
  -ms-animation: shoryuken steps(7) 1s infinite;
  animation: shoryuken steps(7) 1s infinite;
}
.shoryuken.down {
  bottom: 112px;
}

@-webkit-keyframes shoryuken {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -490px 0px;
  }
}
@-moz-keyframes shoryuken {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -490px 0px;
  }
}
@-ms-keyframes shoryuken {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -490px 0px;
  }
}
@keyframes shoryuken {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -490px 0px;
  }
}
/* tatsumaki senpuu kyaku */
.tatsumaki {
  height: 110px;
  background-image: url("ken-tatsumaki-senpuu-kyaku.png");
  -webkit-transition: bottom 0.2s cubic-bezier(0.99, 0.005, 0, 0.42);
  -moz-transition: bottom 0.2s cubic-bezier(0.99, 0.005, 0, 0.42);
  -ms-transition: bottom 0.2s cubic-bezier(0.99, 0.005, 0, 0.42);
  transition: bottom 0.2s cubic-bezier(0.99, 0.005, 0, 0.42);
  bottom: 132px;
  -webkit-animation: tatsumaki steps(13) 2s infinite;
  -moz-animation: tatsumaki steps(13) 2s infinite;
  -ms-animation: tatsumaki steps(13) 2s infinite;
  animation: tatsumaki steps(13) 2s infinite;
}
.tatsumaki.down {
  bottom: 112px;
}

@-webkit-keyframes tatsumaki {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -910px 0px;
  }
}
@-moz-keyframes tatsumaki {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -910px 0px;
  }
}
@-ms-keyframes tatsumaki {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -910px 0px;
  }
}
@keyframes tatsumaki {
  from {
    background-position: 0px 0px;
  }

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

.stage {
  position: absolute;
  top: 0;
  width: 450px;
  height: 330px;
  background: url("sf2-bg.jpg") no-repeat 0px -100px;
  background-size: contain;
  float: left;
  margin-right: 20px;
}

body {
  margin: 0px;
  padding: 0;
}