Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

// Add vendor prefixes to keyframes
@mixin keyframe ($animation-name) 
  @-webkit-keyframes #{$animation-name}
    @content
  @-moz-keyframes #{$animation-name}
    @content
  @-o-keyframes #{$animation-name}
    @content
  @keyframes #{$animation-name}
    @content

// Usage: @include animation(block-1-animate, $speed, ease-out, infinite)
@mixin animation ($animation, $duration, $transition, $iteration)
  -webkit-animation-name: $animation
  -webkit-animation-duration: $duration
  -webkit-animation-timing-function: $transition
  -webkit-animation-iteration-count: $iteration
  -moz-animation-name: $animation
  -moz-animation-duration: $duration
  -moz-animation-timing-function: $transition
  -moz-animation-iteration-count: $iteration
  -o-animation-name: $animation
  -o-animation-duration: $duration
  -o-animation-timing-function: $transition
  -o-animation-iteration-count: $iteration
  animation-name: $animation
  animation-duration: $duration
  animation-timing-function: $transition
  animation-iteration-count: $iteration

// Keyframe animation
@include keyframe (block-1-animate)
  0%
    width: 0
  16.6%
    left: 0
    right: auto
    width: 100%
  33.2%
    left: auto
    right: 0
    width: 0

// Animate the green thing  
.green
  @include animation(block-1-animate, 1s, ease-out, infinite)

SassMeister-output.css

@-webkit-keyframes block-1-animate {
  0% {
    width: 0;
  }

  16.6% {
    left: 0;
    right: auto;
    width: 100%;
  }

  33.2% {
    left: auto;
    right: 0;
    width: 0;
  }
}
@-moz-keyframes block-1-animate {
  0% {
    width: 0;
  }

  16.6% {
    left: 0;
    right: auto;
    width: 100%;
  }

  33.2% {
    left: auto;
    right: 0;
    width: 0;
  }
}
@-o-keyframes block-1-animate {
  0% {
    width: 0;
  }

  16.6% {
    left: 0;
    right: auto;
    width: 100%;
  }

  33.2% {
    left: auto;
    right: 0;
    width: 0;
  }
}
@keyframes block-1-animate {
  0% {
    width: 0;
  }

  16.6% {
    left: 0;
    right: auto;
    width: 100%;
  }

  33.2% {
    left: auto;
    right: 0;
    width: 0;
  }
}
.green {
  -webkit-animation-name: block-1-animate;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: block-1-animate;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease-out;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: block-1-animate;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease-out;
  -o-animation-iteration-count: infinite;
  animation-name: block-1-animate;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}