Sass Keyframes animation mixin generating invalid CSS

Question

I have the following keyframes mixin, but it seems to be generated invalid CSS:

@mixin keyframes($animationName)
{
    @-webkit-keyframes $animationName {
           


        

Answer 1

Same as above with prefixes:

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    $browser: '-webkit-' !global;
    @content;
  }
  @-moz-keyframes #{$animationName} {
    $browser: '-moz-' !global;
    @content;
  }
  @-o-keyframes #{$animationName} {
    $browser: '-o-' !global;
    @content;
  }
  @keyframes #{$animationName} {
    $browser: '' !global;
    @content;
  }
} $browser: null;

Full details here.

Or just use Autoprefixer instead.