A simple mixin to create keyframe animation. Bourbon doesn't currently have a mixin for this. Requires SASS 3.2

Keyframe Animation Mixin

// Mixin
@mixin keyframes($name) {
  @-moz-keyframes #{$name}    { @content; }
  @-webkit-keyframes #{$name} { @content; }
  @-o-keyframes #{$name}      { @content; }
  @-ms-keyframes #{$name}     { @content; }
  @-khtml-keyframes #{$name}  { @content; }
  @keyframes #{$name}         { @content; }
}

// Create the keyframes using the mixin
@include keyframes(textglow) {
  from { text-shadow: 0 0 9px red; color: red;}
    to { text-shadow: 0 0 19px pink; color: pink;}
}

// Use the keyframes
h1 {
  @include animation(textglow 8s infinite);
}

Was surprised to find this wasn't already in Bourbon, since animation is there, but it's essentially useless without keyframes.

Anyway, I see you're using 'text-shadow' in your keyframes. What happens if you were keyframing 'transform' or 'box-shadow' or some other prefix-needing property?

For instance, say:

@include keyframes(flare) {
from { @include border-radius(2px);}
to { @include border-radius(40px);}
}

That's going to write:

@-webkit-keyframes flare {
from { -webkit-border-radius:2px;-moz-border-radius:2px,border-radius:2px}
to { -webkit-border-radius:40px;-moz-border-radius:40px,border-radius:40px}
}

@-moz-keyframes flare {
from { -webkit-border-radius:2px;-moz-border-radius:2px,border-radius:2px}
to { -webkit-border-radius:40px;-moz-border-radius:40px,border-radius:40px}
}

.... and so on.

Technically it should work, but a lot of redundant code. I guess this might be the only time time you'd have CSS3 inside CSS3.

Any ideas?