scss step animation mixin

scss step animation mixin

// This mixin takes the pain out of CSS step functions and has a non CSS3 fallback
//
// EXAMPLE:
// @include css-step-animation(ofo-welcome, 60, 'pages/one_funnel_onboarding/welcome.png', 12000px);
@mixin css-step-animation($name, $frames, $sprite-url, $sprite-length, $speed: 2s, $iteration-count: 1, $direction: normal, $fill-mode: forwards) {

    $frame-width: $sprite-length / $frames;

    background-image: image-url($sprite-url);
    background-position: (-$sprite-length + $frame-width) 0;
    background-repeat: no-repeat;

    @at-root {
        .css-transform-support & {
            @include animation-fill-mode($fill-mode);
            @include animation-name($name);
            @include animation-duration($speed);
            @include animation-timing-function(steps($frames - 1, end));
            @include animation-iteration-count($iteration-count);
            @include animation-direction($direction);

            background-size: auto 100%;
            background-position: 0 0;
        }

        @include keyframes($name) {
            to {
                background-position: (-$sprite-length + $frame-width) 0;
            }
        }
    }
}