Keyframes. Create a named animation sequence that can be applied to elements later.

keyframes-mixin.scss

/**
 * Keyframes.
 * Create a named animation sequence that can be applied to elements later.
 *
 * Usage:
 *     @include keyframes(fly) {
 *          from {
 *              transform: rotate(0deg);
 *          }
 *          to {
 *              transform: rotate(360deg);
 *          }
 *     }
 */

@mixin keyframes($name) {
    @-moz-keyframes #{$name} {
        @content;
    }
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-o-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @-khtml-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}