animate-pages.scss

@function gcd($a, $b) {
  @return if($b > 0, gcd($b, $a % $b), $a);
}

@function get-steps($elements, $page-size) {
  @return $elements / gcd($page-size, $elements);
}

@function is-active($n, $step, $elements, $page-size) {
  @return $n > ($step * $page-size % $elements);
}

@function step-percentage($step, $steps) {
  @return $step * 100% / $steps;
}

@mixin animate-pages($elements, $page-size, $page-duration, $delay: 0s) {
  $steps: get-steps($elements, $page-size);
  $total-duration: $steps * $page-duration;

  animation: $total-duration step-end $delay infinite;

  @for $n from 1 through $elements {
    &:nth-child(#{$n}) {
      animation-name: animate-page-#{$n};

      @keyframes animate-page-#{$n} {
        @for $step from 0 to $steps {
          @if is-active($n, $step, $elements, $page-size) {
            #{step-percentage($step, $steps)} { order: -1; }

            @if not is-active($n, $step + 1, $elements, $page-size) {
              #{step-percentage($step + 1, $steps)} { order: 0; }
            }
          }
        }
      }
    }
  }
}