Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

/**
 * Generate the carousel animation
 * based on the number of frames
 * and the pourcentage of a frame spent static
 *
 * @param {Number} $n - number of frames
 * @param {Number} $x - percentage of the animation spent static per frame
 * @param {String} $animation-name ('carousel') - animation name
 */
 
@mixin carousel-animation($frames, $static, $animation-name: 'carousel') {
  // Make `$static` a percentage in case it's unitless
  @if unitless($static) {
    $static: percentage($static);
  }

  // Compute the percentage of animation spent animating for each frame
  $animating: (100% - $frames * $static) / ($frames - 1);
  
  // Output the animation at root level
  // to make sure it doesn't crash if called in a selector
  @at-root {
    
    // Create an animation
    @keyframes #{$animation-name} {
      
      // Loop over the frames
      @for $i from 0 to $frames {
        // Compute keyframes
        $current-frame: $i * $static + $i * $animating;
        $next-frame: ($i + 1) * $static + $i * $animating;
        $halfway-frame: $i * $static / 1% + ($i - 1) * $animating + $animating / 2;
        
        // Output halfway styles for blur
        // Avoid a negative keyframes by making sure `$i` is at least `1`
        @if $i > 0 {
          #{$halfway-frame} {
            filter: blur(2px);
          }
        }

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

// Generate animation
@include carousel-animation(5, 17.5%);

SassMeister-output.css

/**
 * Generate the carousel animation
 * based on the number of frames
 * and the pourcentage of a frame spent static
 *
 * @param {Number} $n - number of frames
 * @param {Number} $x - percentage of the animation spent static per frame
 * @param {String} $animation-name ('carousel') - animation name
 */
@keyframes carousel {
  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);
  }
}