// keyframes mixin
@mixin keyframes($name) {
	@-webkit-keyframes #{$name} {
		0% {
			background-color: #ffccf2;
		}
		100% {
			background-color: #ccffff;
		}
	}
	@-moz-keyframes #{$name} {
		from {
			background-color: #ffccf2;
		}
		to {
			background-color: #ccffff;
		}
	}
	@-ms-keyframes #{$name} {
		from {
			background-color: #ffccf2;
		}
		100% {
			background-color: #ccffff;
		}
	}
	@keyframes #{$name} {
		0% {
			background-color: #ffccf2;
		}
		to {
			background-color: #ccffff;
		}
	}
}

// use of keyframes mixin
@include keyframes(bgcolor);

// use of keyframes outside mixin. pure css
@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
	50% {top: 100px;}
}