Last Updated: February 25, 2016
·
35.37K
· yoeran

SCSS Keyframe Mixin

Easily vendor-prefix your keyframes with this SCSS mixin.

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

Example:

@include keyframes( incrediblehulk )
{
    0% {
        color: #f8d2c0;
        // you can also use mixins inside this mixin!
        @include transform( scale(1) );
    }

    100% {
        color: #0f0;
        @include transform( scale(3) );
    }
}

Note: The @content block was implemented in SASS 3.2