frame-by-frame animation with Skrollr

I'm trying to do a frame-by-frame animation using Skrollr. It seems to be an appropriate tool for the job, and so far I've done this and it works:

<div id="slides-container">
    <div id="slides">
      <div id="slide-4" class="slide" data-300="display: block;" ></div>
      <div id="slide-3" class="slide" data-200="display: block;" data-300="display: none;"></div>
      <div id="slide-2" class="slide" data-100="display: block;" data-200="display: none;"></div>
      <div id="slide-1" class="slide" data-0="display: block;"  data-100="display: none;"></div>
    </div>
</div>

...

body, html {
  height: 100%;
  width: 100%;
}
#slides-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#slides {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;

  .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    background-size: cover;
  }
}

#slide-1 { background: url('http://ift.tt/1Ex5t6o') no-repeat center center; }
#slide-2 { background: url('http://ift.tt/185u70R') no-repeat center center; }
#slide-3 { background: url('http://ift.tt/1Ex5t6q') no-repeat center center; }
#slide-4 { background: url('http://ift.tt/185u59e') no-repeat center center; }

(it makes no much sense to use the kitten photos, that's just for the sake of the example. i'm actually using a sequence of frames)

codepen sample

That markup looks awful, verbose and entangled. I'm sure there are different ways to do that but I can't find any.

An idea is to have, for example, this:

.slide {
  display: none;
  &.show {
    display: block;
  }
}

...and a way to add the .show class to each element according to the current keyframe.

Is it possible to do that or anything similar? Is there any other way to do a frame-by-frame animation with Skroller, or any other library?

PS: It should work on mobile devices.