//Defaults
@defaultDuration : 0.25s;
@defaultEasing             : ease;

//Animates all properties on an element
.animateAll(@duration : @defaultDuration, @easing : @defaultEasing) {
	-webkit-transition : all @duration @easing;
	-moz-transition    : all @duration @easing;
	-o-transition      : all @duration @easing;
	transition         : all @duration @easing;
}
//Animates Specific property
.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing) {
	-webkit-transition : @prop @duration @easing;
	-moz-transition    : @prop @duration @easing;
	-o-transition      : @prop @duration @easing;
	transition         : @prop @duration @easing;
}

.animateMany(...) {
	@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
	-webkit-transition-property : @value;
	-moz-transition-property    : @value;
	-o-transition-property      : @value;
	transition-property         : @value;

	.animateDuration();
	.animateEasing();
}

.animateDuration(@duration : @defaultDuration) {
	-webkit-transition-duration : @duration;
	-moz-transition-duration    : @duration;
	-o-transition-duration      : @duration;
	transition-duration         : @duration;
}

.animateEasing(@easing : @defaultEasing) {
	-webkit-transition-timing-function : @easing;
	-moz-transition-timing-function    : @easing;
	-o-transition-timing-function      : @easing;
	transition-timing-function         : @easing;
}


.transition (@prop, @duration: @defaultDuration) {
	-webkit-transition : @prop @duration, -webkit-transform @duration;
	-moz-transition    : @prop @duration, -moz-transform @duration;
	-o-transition      : @prop @duration, -o-transform @duration;
	-ms-transition     : @prop @duration, -ms-transform @duration;
	transition         : @prop @duration, transform @duration;
}
.transform (@transform) {
	-webkit-transform : @transform;
	-moz-transform    : @transform;
	-o-transform      : @transform;
	-ms-transform     : @transform;
	transform         : @transform;
}


.delay(@delay) {
	-webkit-transition-delay : @delay;
	transition-delay         : @delay;
	-webkit-animation-delay  : @delay;
	animation-delay          : @delay;
}
.keep() {
	-webkit-animation-fill-mode : forwards;
	-moz-animation-fill-mode    : forwards;
	-ms-animation-fill-mode     : forwards;
	-o-animation-fill-mode      : forwards;
	animation-fill-mode         : forwards;
}


.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s) {
	&:nth-child(1) {.delay(0*@delayInc + @initialDelay); }
	&:nth-child(2) {.delay(1*@delayInc + @initialDelay); }
	&:nth-child(3) {.delay(2*@delayInc + @initialDelay); }
	&:nth-child(4) {.delay(3*@delayInc + @initialDelay); }
	&:nth-child(5) {.delay(4*@delayInc + @initialDelay); }
	&:nth-child(6) {.delay(5*@delayInc + @initialDelay); }
	&:nth-child(7) {.delay(6*@delayInc + @initialDelay); }
	&:nth-child(8) {.delay(7*@delayInc + @initialDelay); }
	&:nth-child(9) {.delay(8*@delayInc + @initialDelay); }
	&:nth-child(10) {.delay(9*@delayInc + @initialDelay); }
	&:nth-child(11) {.delay(10*@delayInc + @initialDelay); }
	&:nth-child(12) {.delay(11*@delayInc + @initialDelay); }
	&:nth-child(13) {.delay(12*@delayInc + @initialDelay); }
	&:nth-child(14) {.delay(13*@delayInc + @initialDelay); }
	&:nth-child(15) {.delay(14*@delayInc + @initialDelay); }
	&:nth-child(16) {.delay(15*@delayInc + @initialDelay); }
	&:nth-child(17) {.delay(16*@delayInc + @initialDelay); }
	&:nth-child(18) {.delay(17*@delayInc + @initialDelay); }
	&:nth-child(19) {.delay(18*@delayInc + @initialDelay); }
	&:nth-child(20) {.delay(19*@delayInc + @initialDelay); }
}



.createFrames(@name, @from, @to) {
	@frames: {
		from { @from(); }
		to { @to(); }
	};
	@-webkit-keyframes		 @name {@frames();}
	@-moz-keyframes @name {@frames();}
	@-ms-keyframes @name {@frames();}
	@-o-keyframes @name {@frames();}
	@keyframes @name {@frames();}
}

.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing) {
	-webkit-animation-name            : @name;
	-moz-animation-name               : @name;
	-ms-animation-name                : @name;
	animation-name                    : @name;
	-webkit-animation-duration        : @duration;
	-moz-animation-duration           : @duration;
	-ms-animation-duration            : @duration;
	animation-duration                : @duration;
	-webkit-animation-timing-function : @easing;
	-moz-animation-timing-function    : @easing;
	-ms-animation-timing-function     : @easing;
	animation-timing-function         : @easing;
}



/***************************
	  Standard Animations
****************************/

.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeIn; @duration; @easing);
	.createFrames(fadeIn,
	{ opacity : 0; },
		{ opacity : 1; }
	);
}

.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeInDown; @duration; @easing);
	.createFrames(fadeInDown,
	{ opacity : 0; .transform(translateY(20px));},
		{ opacity : 1; .transform(translateY(0px));}
	);
}

.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeInTop; @duration; @easing);
	.createFrames(fadeInTop,
	{ opacity : 0; .transform(translateY(-20px)); },
		{ opacity : 1; .transform(translateY(0px));}
	);
}

.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeInLeft; @duration; @easing);
	.createFrames(fadeInLeft,
	{ opacity: 0; .transform(translateX(-20px));},
		{ opacity: 1; .transform(translateX(0));}
	);
}

.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeInRight; @duration; @easing);
	.createFrames(fadeInRight,
	{ opacity: 0; .transform(translateX(20px));},
		{ opacity: 1; .transform(translateX(0));}
	);
}

.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeOut; @duration; @easing);
	.createFrames(fadeOut,
	{ opacity : 1; },
		{ opacity : 0; }
	);
}

.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeOutDown; @duration; @easing);
	.createFrames(fadeOutDown,
	{ opacity : 1; .transform(translateY(0)); visibility: visible;},
		{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
	);
}

.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeOutTop; @duration; @easing);
	.createFrames(fadeOutTop,
	{ opacity : 1; .transform(translateY(0)); },
		{ opacity : 0; .transform(translateY(-20px)); }
	);
}

.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeOutLeft; @duration; @easing);
	.createFrames(fadeOutLeft,
	{ opacity : 1; .transform(translateX(0));},
		{ opacity : 0; .transform(translateX(-20px));}
	);
}

.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(fadeOutRight; @duration; @easing);
	.createFrames(fadeOutRight,
	{ opacity : 1; .transform(translateX(0));},
		{ opacity : 0; .transform(translateX(20px));}
	);
}




/***************************
		Fun Animations
****************************/

.spin(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(spin, @duration, @easing);
	.spinKeyFrames() {
		from { .transform(rotate(0deg)); }
		to { .transform(rotate(360deg)); }
	}
	@-webkit-keyframes spin {.spinKeyFrames();}
	@-moz-keyframes spin {.spinKeyFrames();}
	@-ms-keyframes spin {.spinKeyFrames();}
	@-o-keyframes spin {.spinKeyFrames();}
	@keyframes spin {.spinKeyFrames();}
}

.bounce(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(bounce, @duration, @easing);
	.bounceKeyFrames() {
		0%, 20%, 50%, 80%, 100% { .transform(translateY(0));}
		40% { .transform(translateY(-30px));}
		60% { .transform(translateY(-15px));}
	}
	@-webkit-keyframes bounce {.bounceKeyFrames();}
	@-moz-keyframes bounce {.bounceKeyFrames();}
	@-ms-keyframes bounce {.bounceKeyFrames();}
	@-o-keyframes bounce {.bounceKeyFrames();}
	@keyframes bounce {.bounceKeyFrames();}
}

.pulse(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(pulse, @duration, @easing);
	.pulseKeyFrames() {
		0% { .transform(scale(1));}
		50% { .transform(scale(1.4));}
		100% { .transform(scale(1));}
	}
	@-webkit-keyframes pulse {.pulseKeyFrames();}
	@-moz-keyframes pulse {.pulseKeyFrames();}
	@-ms-keyframes pulse {.pulseKeyFrames();}
	@-o-keyframes pulse {.pulseKeyFrames();}
	@keyframes pulse {.pulseKeyFrames();}
}

.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(rubberBand, @duration, @easing);
	.rubberBandKeyFrames() {
		0% {.transform(scale(1));}
		30% {.transform(scaleX(1.25) scaleY(0.75));}
		40% {.transform(scaleX(0.75) scaleY(1.25));}
		60% {.transform(scaleX(1.15) scaleY(0.85));}
		100% {.transform(scale(1));}
	}
	@-webkit-keyframes rubberBand {.rubberBandKeyFrames();}
	@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
	@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
	@-o-keyframes rubberBand {.rubberBandKeyFrames();}
	@keyframes rubberBand {.rubberBandKeyFrames();}
}

.shake(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(shake, @duration, @easing);
	.shakeKeyFrames() {
		0%, 100% {.transform( translateX(0));}
		10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));}
		20%, 40%, 60%, 80% {.transform( translateX(10px));}
	}
	@-webkit-keyframes shake {.shakeKeyFrames();}
	@-moz-keyframes shake {.shakeKeyFrames();}
	@-ms-keyframes shake {.shakeKeyFrames();}
	@-o-keyframes shake {.shakeKeyFrames();}
	@keyframes shake {.shakeKeyFrames();}
}

.swing(@duration : @defaultDuration, @easing : @defaultEasing) {
	-webkit-transform-origin : top center;
	-ms-transform-origin     : top center;
	transform-origin         : top center;
	.createAnimation(swing, @duration, @easing);
	.swingKeyFrames() {
		20% {.transform(rotate(15deg));}
		40% {.transform(rotate(-10deg));}
		60% {.transform(rotate(5deg));}
		80% {.transform(rotate(-5deg));}
		100% {.transform(rotate(0deg));}
	}
	@-webkit-keyframes swing {.swingKeyFrames();}
	@-moz-keyframes swing {.swingKeyFrames();}
	@-ms-keyframes swing {.swingKeyFrames();}
	@-o-keyframes swing {.swingKeyFrames();}
	@keyframes swing {.swingKeyFrames();}
}

.twist(@duration : @defaultDuration, @easing : @defaultEasing) {
	-webkit-transform-origin : center center;
	-ms-transform-origin     : center center;
	transform-origin         : center center;
	.createAnimation(swing, @duration, @easing);
	.swingKeyFrames() {
		20% {.transform(rotate(15deg));}
		40% {.transform(rotate(-10deg));}
		60% {.transform(rotate(5deg));}
		80% {.transform(rotate(-5deg));}
		100% {.transform(rotate(0deg));}
	}
	@-webkit-keyframes swing {.swingKeyFrames();}
	@-moz-keyframes swing {.swingKeyFrames();}
	@-ms-keyframes swing {.swingKeyFrames();}
	@-o-keyframes swing {.swingKeyFrames();}
	@keyframes swing {.swingKeyFrames();}
}

.wobble(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(wobble, @duration, @easing);
	.wobbleKeyFrames() {
		0% {.transform(translateX(0%));}
		15% {.transform(translateX(-25%) rotate(-5deg));}
		30% {.transform(translateX(20%) rotate(3deg));}
		45% {.transform(translateX(-15%) rotate(-3deg));}
		60% {.transform(translateX(10%) rotate(2deg));}
		75% {.transform(translateX(-5%) rotate(-1deg));}
		100% {.transform(translateX(0%));}
	}
	@-webkit-keyframes wobble {.wobbleKeyFrames();}
	@-moz-keyframes wobble {.wobbleKeyFrames();}
	@-ms-keyframes wobble {.wobbleKeyFrames();}
	@-o-keyframes wobble {.wobbleKeyFrames();}
	@keyframes wobble {.wobbleKeyFrames();}
}

.popIn(@duration : @defaultDuration, @easing : @defaultEasing) {
	.createAnimation(popIn, @duration, @easing);
	.popInKeyFrames() {
		0% { .transform(scale(0));}
		70% { .transform(scale(1.4));}
		100% { .transform(scale(1));}
	}
	@-webkit-keyframes popIn {.popInKeyFrames();}
	@-moz-keyframes popIn {.popInKeyFrames();}
	@-ms-keyframes popIn {.popInKeyFrames();}
	@-o-keyframes popIn {.popInKeyFrames();}
	@keyframes popIn {.popInKeyFrames();}
}