CSS3 Animation & Keyframes LESS Mixins

Animation-Keyframes-Mixins.less

/* #1 A SIMPLE WAY */
/* SOURCE: http://radiatingstar.com/css-keyframes-animations-with-less */

@-webkit-keyframes some-animation {.mixi-frames;}
@-moz-keyframes some-animation {.mixi-frames;}
@-ms-keyframes some-animation {.mixi-frames;}
@-o-keyframes some-animation {.mixi-frames;}
@keyframes some-animation {.mixi-frames;}

.mixi-frames () {
	from {width: 254px;}
	to {width: 512px;}
}

/* RESULTING CSS: */

@-webkit-keyframes some-animation {
	from {width: 254px;}
	to {width: 512px;}
}
@-moz-keyframes some-animation {
	from {width: 254px;}
	to {width: 512px;}
}
@-ms-keyframes some-animation {
	from {width: 254px;}
	to {width: 512px;}
}
@-o-keyframes some-animation {
	from {width: 254px;}
	to {width: 512px;}
}
@keyframes some-animation {
	from {width: 254px;}
	to {width: 512px;}
}

/* #2 A BETTER WAY */
/* SOURCE: http://codepen.io/zvuc/pen/xvoys/ */

.keyframes(@name; @arguments) {
	@-moz-keyframes @name { @arguments(); }
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}

.animation(@arguments) {
	-webkit-animation: @arguments;
	-moz-animation: @arguments;
	animation: @arguments;
}

/* EXAMPLE USAGE: */
.container {
	
	.keyframes(fade-in;{
		0% { opacity: 0; }
		100% { opacity: 1; }
		});

	.animation(fade-in 0.2s linear infinite alternate)

}