carousel.css

// ----
// 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);
        }
      }
    }
  }
}

/**
Calling it:
    @include carousel-animation(
      $frames: 5,
      $static: 17.5%
    );

And if we want another instance for a different page: 
    @include carousel-animation(
      $name: 'carousel-contact',
      $frames: 3,
      $static: 20%
    );
*/

// Generate the animation with a one-liner
@include carousel-animation(5, 17.5%);