Generated by SassMeister.com.

SassMeister-input.scss

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

// Mixin to prefix keyframes
//
// @param {String} $animation-name - animation name
// @param {String} $vendor (null) - vendor prefix to output

@mixin keyframes($animation-name, $vendor: null) {
  // Unfortunately Sass does not allow string concatenation
  // in @-directives so we can't make things any more dynamic 
  // than this... which sucks, obviously.
  @if $vendor == "webkit" {
    @-webkit-keyframes #{$animation-name} { @content; }
  }
  @else if $vendor == "moz" {
    @-moz-keyframes #{$animation-name} { @content; }
  }
  @else if $vendor == "ms" {
    @-ms-keyframes #{$animation-name} { @content; }
  }
  @else {
    @keyframes #{$animation-name} { @content; }
  }
}

// Mixin to prefix properties.
// Warning! Unprefixed property always get output.
//
// @example
//  @include prefixer('transform', 'translate(10px)', webkit ms);
//
// @param {Map} $declarations - Properties/values pairs
// @param {List} $vendors (webkit moz ms o) - Vendor prefixes to output

@mixin prefixer($declarations, $vendors: webkit moz ms o) {
  @each $prop, $value in $declarations {
    @if $vendors {
      @each $vendor in $vendors {
        #{"-" + $vendor + "-" + $prop}: #{$value};
      }
    }
    // Dump regular property anyway
    #{$prop}: #{$value};
  }
}

// Generate the carousel animation
// based on the number of frames
// and the pourcentage of a frame spent static
//
// @param {Number} $frames - number of frames
// @param {Number} $static - percentage of the animation spent static per frame
// @param {String} $animation-name ('carousel') - animation name
//
// @requires {mixin} prefixer
// @requires {mixin} keyframes
 
@mixin carousel-animation($frames, $static, $animation-name: 'carousel', $vendor: null) {
  // 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 {
    @include keyframes($animation-name, $vendor) {
      // 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} {
            @include prefixer((
              filter: blur(2px)
            ), $vendor);
          }
        }
    
        // Output styles for each frame
        #{$current-frame, $next-frame} {
          @include prefixer((
            transform: translateX($i * -100% / $frames),
            filter: blur(0)
          ), $vendor);
        }
      }
    }
  }
}

// Generate animation
// Add `null` for the unprefixed keyframes
@each $vendor in "webkit", "ms", null {
  @include carousel-animation(5, 17.5%, $vendor: $vendor);
}

SassMeister-output.css

@-webkit-keyframes carousel {
  0%, 17.5% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-filter: blur(0);
    filter: blur(0);
  }
  19.0625% {
    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
  20.625%, 38.125% {
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%);
    -webkit-filter: blur(0);
    filter: blur(0);
  }
  39.6875% {
    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
  41.25%, 58.75% {
    -webkit-transform: translateX(-40%);
    transform: translateX(-40%);
    -webkit-filter: blur(0);
    filter: blur(0);
  }
  60.3125% {
    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
  61.875%, 79.375% {
    -webkit-transform: translateX(-60%);
    transform: translateX(-60%);
    -webkit-filter: blur(0);
    filter: blur(0);
  }
  80.9375% {
    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
  82.5%, 100% {
    -webkit-transform: translateX(-80%);
    transform: translateX(-80%);
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@-ms-keyframes carousel {
  0%, 17.5% {
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    -ms-filter: blur(0);
    filter: blur(0);
  }
  19.0625% {
    -ms-filter: blur(2px);
    filter: blur(2px);
  }
  20.625%, 38.125% {
    -ms-transform: translateX(-20%);
    transform: translateX(-20%);
    -ms-filter: blur(0);
    filter: blur(0);
  }
  39.6875% {
    -ms-filter: blur(2px);
    filter: blur(2px);
  }
  41.25%, 58.75% {
    -ms-transform: translateX(-40%);
    transform: translateX(-40%);
    -ms-filter: blur(0);
    filter: blur(0);
  }
  60.3125% {
    -ms-filter: blur(2px);
    filter: blur(2px);
  }
  61.875%, 79.375% {
    -ms-transform: translateX(-60%);
    transform: translateX(-60%);
    -ms-filter: blur(0);
    filter: blur(0);
  }
  80.9375% {
    -ms-filter: blur(2px);
    filter: blur(2px);
  }
  82.5%, 100% {
    -ms-transform: translateX(-80%);
    transform: translateX(-80%);
    -ms-filter: blur(0);
    filter: blur(0);
  }
}
@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);
  }
}