houdini/app/assets/stylesheets/components/animations.css.scss

/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
@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;
    }
}

// Using the mixins looks like this:
// @include keyframes(move-the-object) {
//   0%   { left: 100px; }
//   100% { left: 200px; }
// }

// .object-to-animate {
//   @include animation('move-the-object .5s 1', 'move-the-object-again .5s 1 .5s');
// }

// credit: http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/