Ken's Street Fighter II with animated sprites

              
                /* 
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
*/

/*
All vendor prefixes are autogenerated by Autoprefixer
*/

@mixin anim($animName, $steps, $animNbr, $animParams){
  .#{$animName} { 
    @content;
    animation:$animName steps($steps) $animParams; 
  }
  @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 { 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('https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/ken.png'); 
  
  /* other sprites preloading */
  &:before { 
    content:'';
    background: url('https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/ken-tatsumaki-senpuu-kyaku.png') no-repeat; 
  }
  &:after { 
    content:'';
    background: url('https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/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 */
  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) {
  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('https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/ken-shoryuken.png');
  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('https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/ken-tatsumaki-senpuu-kyaku.png');
  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('https://raw.githubusercontent.com/jkneb/street-fighter-css/master/images/bg2.jpg') no-repeat 0px -100px;
  background-size:contain;
  float:left; margin-right:20px; 
}
body { margin:0px; padding:0; }