Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Compass mixins for generating CSS animations and keyframes
/*
* Compass doesn't have an animation mixin either. Here's one:
*
* Example usage:
* @include animation(10s, 5s, changecolour)
*/
@mixin animation($delay, $duration, $animation) {
@each $i in webkit, moz, o {
-#{$i}-animation-delay: $delay;
-#{$i}-animation-duration: $duration;
-#{$i}-animation-name: $animation;
}
animation-delay: $delay;
animation-duration: $duration;
animation-name: $animation;
}
/*
* Strangely enough, Compass doesn't have a keyframes mixin. Here's a custom one.
*
* @include keyframes(myanimation) {
* 50% { @include rotateZ(180deg); }
* 100% { @include rotateZ(360deg); }
* }
*/
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-o-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment