🥇 SCSS Keyframe Mixin

Com este mixin SCSS, prefixe facilmente o fornecedor de seus quadros-chave.

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

Exemplo:

@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) );
    }
}

Nota: O bloco @content foi implementado no SASS 3.2

Related Posts