backgrounds/steps-animation/src/style.css

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