Using Vendor Prefixes to Create Animations in LESS

Let's make a function that implements the cross-browser command @keyframes:

.keyframes(@name, @code) {
	@-o-keyframes @name {@code();}
	@-moz-keyframes @name {@code();}
	@-webkit-keyframes @name {@code();}
	@keyframes @name {@code();}
}

Let's use our function:

.keyframes(anim, {
		from {
			width: 100px;
		}
		to {
			width: 200px;
		}
	}
);

Compilation result:

@-o-keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@-moz-keyframes	anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@-webkit-keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}
@keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}