Skip to content

Instantly share code, notes, and snippets.

@freshyill

freshyill/Keyframe Animation Mixin

Created September 28, 2012 14:34
Show Gist options
  • Save freshyill/3800217 to your computer and use it in GitHub Desktop.
Save freshyill/3800217 to your computer and use it in GitHub Desktop.
Download ZIP
A simple mixin to create keyframe animation. Bourbon doesn't currently have a mixin for this. Requires SASS 3.2
Raw
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);
}
@alexmwalker
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment