Sass mixins for cross-browser CSS animate and keyframe. @include animate() accepts multiple animations in a comma-separated list.

Animate and Keyframe Sass Mixins

// animate with prefixes
// @include animation(ANIMATIONNAME LENGTH REPEAT INOUT,ANIMATIONNAME LENGTH REPEAT INOUT,ANIMATIONNAME LENGTH REPEAT INOUT);
@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;
}

// animation keyframes
// @include keyframes(ANIMATIONNAME) {
//   0% { ATTRIBUTE: VALUE; ATTRIBUTE: VALUE; }
//   50% { ATTRIBUTE: VALUE; ATTRIBUTE: VALUE; }
//   100% { ATTRIBUTE: VALUE; ATTRIBUTE: VALUE; }
// }
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}