yoshi level up animation

using sprite sheet; fixed sizes; not customizable

by Ercan Cicek

HTML

<div id="cont">
  <div id="img"></div>
  <div id="text">
    <span>Level </span>
    <span>1</span>
  </div>
</div>
<button id="levelUp">level up!</button>

CSS

div#cont {
  position: relative;
  width: 400px;
  height: 150px;
  overflow: hidden;
}

div#img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 225px;
  height: 150px;
  background-image: url('http://www.bilderload.com/daten/ergebnis0IQ05.png');
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: auto 150px;
  z-index: 2;
}

.yoshiAnim {
  animation: yoshyosh 4s steps(24, start) 1;
  animation-fill-mode: forwards;
}

@-webkit-keyframes yoshyosh {
  0% {
    background-position: 0;
  }
  100% {
    background-position: -5400px;
  }
}

@keyframes yoshyosh {
  0% {
    background-position: 0;
  }
  100% {
    background-position: -5400px;
  }
}

div#text {
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  right: 10px;
  bottom: .5em;
  font-size: 3em;
  z-index: 1;
}

JavaScript

$("#levelUp").click(startAnim);

function startAnim() {
	$("#levelUp").prop("disabled", true);
  $("div#img").addClass("yoshiAnim");
  setTimeout(function() {
		$("div#img").animate(
      { left: $("div#cont").width() - 215 }, 
      1120, 
      function() {
        setTimeout(changeNo, 675);
        setTimeout(jumpUp, 1450);
      }
    );
  }, 1200);
}

function changeNo() {
	var curLevel = $("div#text > span:last-child").text();
  $("div#text > span:last-child").text(parseInt(curLevel) + 1);
}

function jumpUp() {
$("div#img").animate(
  { bottom: 125 }, 
  350, 
  function() {
  	$("div#img").removeClass("yoshiAnim")
    .css({ left: 0, bottom: 0 });
    $("#levelUp").prop("disabled", false);
  }
);
}

// 9 - 16 move
// 1.44s - 2.56s