The meat of css-flip-book!

_flip.scss

.flip-book {
  position: absolute;
  bottom: 0;
  right: 0;
  width: $dimension;
  height: $dimension;
}

//Preload images hack with CSS.
$string:'';
@for $i from 1 through $number-of-slides {
  $string: $string + " url('../img/#{$directory-name}/#{$animation-name}-#{$i}.png')";
}

//Uses the preloader hack only on webkit screens. Firefox had some issues interpreting the preloading hack.
@media screen and (-webkit-min-device-pixel-ratio: 0) { 
  body:after{
    display:none;
    content: unquote($string);
  }
}

//Iterates through and adds the background images 
@for $e from 1 through $number-of-repeats {
  //iterates through and adds the background images
  @for $i from 1 through $number-of-slides {
    @media screen and (min-width: $starting-width) {
      .flip-book {
        background: url('../img/#{$directory-name}/#{$animation-name}-#{$i}.png') bottom center / 100% no-repeat;
      }
      $starting-width: $starting-width + $fps;
    }
  }
}

//Ends the flip book.
@media screen and (min-width: $starting-width) {
  .flip-book {
    background: none;
  }
}