Sass Mixin for CSS3 Animations

1. Example.scss

@include keyframe(fadeout) {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@include keyframe(changecolour) {
    0% {
        color: #000;
    }

    100% {
        color: #FFF;
    }
}

2. Keyframe.scss

@mixin keyframe ($animation_name) {
    @-webkit-keyframes $animation_name {
        @content;
    }

    @-moz-keyframes $animation_name {
        @content;
    }

    @-o-keyframes $animation_name {
        @content;
    }

    @keyframes $animation_name {
        @content;
    }
}

3. animation.scss

/*
    Example usage: 
    @include animation(10s, 5s, changecolour)
 */
@mixin animation ($delay, $duration, $animation) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: $delay;
    -o-animation-duration: $duration;
    -o-animation-name: $animation;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

<3 this. thanks.

Why not let something like gulp-autoprefixer do the prefixing heavy-lifting for you and only insert the basic properties into the mixin?

I know this is a pretty old res, though it's missing animation-iteration-count, eg. use of infinite

I was having an error with this outputting the literal $animation_name into the CSS. The accepted answer to this StackOverflow question resolved it for me. You might consider incorporating it into the gist.

I don't understand the examples or their relationship

Thank you very much