$transition2: .45s 1 $transition;

.animation {
	opacity: 1;
	@include translate3d(0,0,0);
	@include perspective(1000);
	will-change: opacity;
	@include min-break($break-small) {
		opacity: 0;
	}
}
.animate {
	will-change: opacity, transform;
}
.fade-in.animate {
	@include animation(fade-in $transition2);
	@include max-break($break-small) {
		@include animation(none);
	}
}
.right-to-left.animate {
	@include animation(right-to-left $transition2);
	@include max-break($break-small) {
		@include animation(none);
	}
}
.left-to-right.animate {
	@include animation(left-to-right $transition2);
	@include max-break($break-small) {
		@include animation(none);
	}
}
.bottom-to-top.animate {
	@include animation(bottom-to-top $transition2);
	@include max-break($break-small) {
		@include animation(none);
	}
}
.top-to-bottom.animate {
	@include animation(top-to-bottom $transition2);
	@include max-break($break-small) {
		@include animation(none);
	}
}
.scale.animate {
	@include animation(scale $transition2);
	@include max-break($break-small) {
		@include animation(none);
	}
}
.swingIn.animate {
	@include transform-origin(50%, 0);
	@include animation(swingInX $transition2);
	@include max-break($break-small) {
		@include animation(none);
	}
}
.animate {
	@include opacity(1);
}
.spinY {
	@include animation(spinY 0.5s linear);
	@include animation-fill-mode(both);
	@include animation-timing-function(cubic-bezier(0.75, 0, 0.175, 1));
}
@include keyframes(fade-in) {
    0%   {@include opacity(0);}
    100% {@include opacity(1);}
}
@include keyframes(right-to-left) {
    0%   {@include opacity(0); @include translateX(50px);}
    100% {@include opacity(1); @include translateX(0px);}
}
@include keyframes(left-to-right) {
    0%   {@include opacity(0); @include translateX(-50px);}
    100% {@include opacity(1); @include translateX(0px);}
}
@include keyframes(bottom-to-top) {
    0%   {@include opacity(0); @include translateY(50px);}
    100% {@include opacity(1); @include translateY(0px);}
}
@include keyframes(top-to-bottom) {
    0%   {@include opacity(0); @include translateY(-50px);}
    100% {@include opacity(1); @include translateY(0px);}
}
@include keyframes(scale) {
    0%   {@include opacity(0); @include scale(0);}
    100% {@include opacity(1); @include scale(1);}
}