Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

@mixin gen-animation($frames, $static, $animation-name: 'test') {
  @if unitless($static) {
    $static: percentage($static);
  }

  $animating: (100% - $frames * $static) / ($frames - 1);
    @at-root {
    
    @keyframes #{$animation-name} {
      @for $i from 0 to $frames {
        $current-frame: $i * $static + $i * $animating;
        $next-frame: ($i + 1) * $static + $i * $animating;
        $halfway-frame: $i * $static / 1% + ($i - 1) * $animating + $animating / 2;
        
        @if $i > 0 {
          #{$halfway-frame} {
            filter: blur(2px);
          }
        }

        #{$current-frame, $next-frame} {
          transform: translateX($i * -100% / $frames);
          filter: blur(0);
        }
      }
    }
  }
}

@include gen-animation(5, 17.5%);

// SASS je programski jezik :D

SassMeister-output.css

@keyframes test {
  0%, 17.5% {
    transform: translateX(0%);
    filter: blur(0);
  }
  19.0625% {
    filter: blur(2px);
  }
  20.625%, 38.125% {
    transform: translateX(-20%);
    filter: blur(0);
  }
  39.6875% {
    filter: blur(2px);
  }
  41.25%, 58.75% {
    transform: translateX(-40%);
    filter: blur(0);
  }
  60.3125% {
    filter: blur(2px);
  }
  61.875%, 79.375% {
    transform: translateX(-60%);
    filter: blur(0);
  }
  80.9375% {
    filter: blur(2px);
  }
  82.5%, 100% {
    transform: translateX(-80%);
    filter: blur(0);
  }
}