Compass Keyframe Animation

keyframe-animation.scss

@import "compass/css3/transform";
@import "compass/css3/transition";

@mixin animation($animate...) {
    $max: length($animate);
    $animations: '';

    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};

        @if $i < $max {
            $animations: #{$animations + ", "};
        }
    }
    -webkit-animation: $animations;
    -moz-animation:    $animations;
    -o-animation:      $animations;
    animation:         $animations;
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}


// use of keyframes mixin
@include keyframes(animate-object) {
  0% {
    top:30px;
    opacity:1;
  }
  100% {
    top:120px;
    opacity:0;
  }
}

.object{
  @include animation('animate-object 1s infinite');
  width:193px;
  height:auto;
  position:absolute;
  top: 120px;
  left: 65px;
}