<div id="animation">
  <div id="frame"></div>
  <div id="roll"></div>
</div>

<ul>
  <li><label><input id="show" type="checkbox"> show sprite</label></li>
  <li>
    <div id="duration">
      <label id="duration-label" class="isRight">1</label>
      <input id="duration-input" type="range" min="0.2" value="1" max="4" step="0.1">
    </div>
    animation-duration
  </li>
</ul>

/* -------------- Animation -------------- */

#animation {
  display: inline-block;
  position: relative;
  text-align: center;
}



/* -------------- Frame -------------- */

.showRoll #frame {
  border-color: hsl(0,0%,70%);
}

#frame {
  width: 50px;
  height: 72px;
  border: 1px solid transparent;
  background: url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
  animation: frame-animation 1s steps(10) infinite;    
}

@keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }



/* -------------- Roll -------------- */

.showRoll #roll {
  opacity: .2;
}

#roll {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 500px;
  height: 72px;
  border: 1px solid hsl(0,0%,70%);
  background: hsl(0,0%,100%) url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
  transition: opacity .3s linear;
  animation:  roll-animation 1s steps(10) infinite;
}

@keyframes roll-animation { 
  0% { transform: translateX(0); } 
  100% { transform:  translateX(-500px); } 
}




/* Global ------------------------------------------------------ */

html {
  height: 100%;
  font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  background: #f0f0f0 url(../img/bg.png);
}

body {
  display:         flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 50px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  text-align: center;      
}

a {
  text-decoration: none;
  color: hsl(210,100%,60%);
}

a:hover {
  color: hsl(210,100%,70%);
}

a:active {
  color: hsl(210,100%,50%);
}

p {
  font-size: 11px;
  line-height: 1.5;
  color: hsl(0,0%,60%);
}

.hl {
  color: hsl(0,0%,20%);
}

ul {
  margin: 40px 0;
  list-style: none;
  text-align: center;
  font-size: 14px;
  color: hsl(0,0%,60%);
}
.WebKit ul {
  text-align: left;
}

li {
  padding: 5px 0;
}


/* Show Sprite Checkbox ------------------------------------------------------ */

.WebKit #show {
  -webkit-appearance: none;
  outline: none;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  margin: -2px 6px 0 0;
  vertical-align: middle;
  border: 10px solid hsl(0,0%,80%);
  background: hsl(0,0%,40%);
  box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
  -webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
}

.WebKit #show:checked:active,
.WebKit #show:active {
  border: 0px solid hsl(0,0%,80%);
  -webkit-transition-duration: .1;
}

.WebKit #show:checked {
  border: 5px solid hsl(0,0%,80%);
  box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4), 0 1px 0 hsla(0,0%,100%,.6);
}





/* Animation Duration ------------------------------------------------------ */

#duration {
  display: inline-block;
  position: relative;
  margin: -4px 6px 0 0;
}


/* Label */

#duration-label {
  display: none;
}

.WebKit #duration-label {
  position: absolute;
  display: block;
  z-index: 1;
  top: 6px;
  font-size: 11px;
  color: hsl(0,0%,60%);
  text-shadow: 0 1px 0 hsla(0,0%,100%,.3);
  pointer-events: none;
  -webkit-transition: -webkit-transform .2s cubic-bezier(.26, .08, .15, 1), 
    color .6s .2s ease-out;
}

.WebKit #duration-label.isRight {
  right: 50%;
  margin-right: -20px;
  left: auto;
  -webkit-transform: translate3d(20px,0,0);
}
.WebKit #duration-label.isLeft {
  right: auto;
  margin-left: -20px;
  left: 50%;
  -webkit-transform: translate3d(-20px,0,0);
}

.WebKit #duration:active #duration-label {
  color: hsl(0,0%,30%);
  -webkit-transition-delay: 0;
}


/* Input */

.WebKit #duration-input {
  -webkit-appearance: none;
  position: relative;
  vertical-align: middle;
  width: 100px;
  border-radius: 20px;
  background: hsl(0,0%,80%);
  box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
  overflow: hidden;
  outline: none;
}

.WebKit #duration-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  border: 5px solid hsl(0,0%,80%);
  background: hsl(0,0%,40%);
  box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4);
  -webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
}

.WebKit #duration-input:active::-webkit-slider-thumb {
  border: 0px solid hsl(0,0%,80%);
  -webkit-transition-duration: .1;
}

if ($.browser.webkit) {
  // yeah, sorry.. but this demo uses appearance:none which hasn't good support anywhere else.
  $('html').addClass('WebKit');
}

$('#show').change( function() {
  $('#animation').toggleClass('showRoll');
});


var labelSide = "right";

$('#duration-input').change( function() {
  var val = $(this).val();
  var valRounded = Math.round( val * 10 ) / 10;
  var mid = $(this).attr('max')/2;
  $('#frame').css("animation-duration", val + "s" );
  $('#roll').css("animation-duration", val + "s" );
  $('#duration-label').text( valRounded );
  
  if(val > mid && labelSide == "right") {
    labelSide = "left";
    $('#duration-label').removeClass("isRight").addClass("isLeft");
    
  } else if(val <= mid && labelSide == "left") {
    labelSide = "right";
    $('#duration-label').removeClass("isLeft").addClass("isRight");
  }
});