Compass mixins for generating CSS animations and keyframes

compass_animation.scss

/*
 * 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;
	}
}