//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){
	animation-delay:@delay;
	-webkit-animation-delay:@delay;
	transition-delay:@delay;
	-webkit-transition-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();}
}