/*fade*/
@keyframes fade-in{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fade-out{
  0% {opacity: 1;}
  15% {opacity: 1;}
  100% {opacity: 0;}
}


/*blur*/
@keyframes blur-in{
  0% {opacity: 0; filter: blur(0);}
  50% {filter: blur(5px);}
  100% {opacity: 1; filter: blur(0);}
}

@keyframes blur-out{
  0% {opacity: 1; filter: blur(0);}
  15% {opacity: 1; filter: blur(0);}
  50% {filter: blur(5px);}
  100% {opacity: 0; filter: blur(0);}
}


/*expand*/
@keyframes expand-in{
  0% {transform: scale(0);}
  100% {transform: scale(1);}
}


/*shrink*/
@keyframes shrink-out{
  0% {transform: scale(1); z-index: 100;}
  100% {transform: scale(0); z-index: 100;}
}


/*rotate*/
@keyframes rotate-in{
	0%{
		transform: rotateY(90deg);
		perspective: 50%;
		perspective-origin: center;
		transform-origin: right;
		animation-timing-function: linear;
	}
	50% {transform: rotateY(50deg); animation-timing-function: linear;}
	75% {transform: rotateY(30deg); animation-timing-function: linear;}
	95% {transform: rotateY(10deg); animation-timing-function: ease-out;}
	100%{
		transform: rotateY(0deg);
		perspective: 50%;
		perspective-origin: center;
		transform-origin: right;
		animation-timing-function: ease-out;
	}
}

@keyframes rotate-out{
	0%{
		transform: rotateY(0deg);
		perspective: 50%;
		perspective-origin: center;
		transform-origin: left;
		animation-timing-function: ease-out;
	}
	90% {transform: rotateY(-85deg); animation-timing-function: linear;}
	100%{
		transform: rotateY(-90deg);
		perspective: 50%;
		perspective-origin: center;
		transform-origin: left;
		animation-timing-function: linear;
	}
}


/*spin*/
@keyframes spin-left-in{
	0% {transform: scale(0.35) translateY(-100%) rotateZ(180deg); transform-origin: bottom;}
	25% {transform: scale(0.35) translateY(-100%) rotateZ(180deg); transform-origin: bottom;}
	75% {transform: scale(0.35) translateY(-100%) rotateZ(0deg); transform-origin: bottom;}
	80% {transform: scale(0.35) translateY(-100%) rotateZ(0deg); transform-origin: bottom;}
	100% {transform: scale(1);}
}

@keyframes spin-left-out{
	0% {transform: scale(1);}
	20% {transform: scale(0.35) translateY(-100%) rotateZ(0deg); transform-origin: bottom;}
	25% {transform: scale(0.35) translateY(-100%) rotateZ(0deg); transform-origin: bottom;}
	75% {transform: scale(0.35) translateY(-100%) rotateZ(-180deg); transform-origin: bottom;}
	100% {transform: scale(0.35) translateY(-100%) rotateZ(-180deg); transform-origin: bottom;}
}

@keyframes spin-right-in{
	0% {transform: scale(0.35) translateY(-100%) rotateZ(-180deg); transform-origin: bottom;}
	25% {transform: scale(0.35) translateY(-100%) rotateZ(-180deg); transform-origin: bottom;}
	75% {transform: scale(0.35) translateY(-100%) rotateZ(0deg); transform-origin: bottom;}
	80% {transform: scale(0.35) translateY(-100%) rotateZ(0deg); transform-origin: bottom;}
	100% {transform: scale(1);}
}

@keyframes spin-right-out{
	0% {transform: scale(1);}
	20% {transform: scale(0.35) translateY(-100%) rotateZ(0deg); transform-origin: bottom;}
	25% {transform: scale(0.35) translateY(-100%) rotateZ(0deg); transform-origin: bottom;}
	75% {transform: scale(0.35) translateY(-100%) rotateZ(180deg); transform-origin: bottom;}
	100% {transform: scale(0.35) translateY(-100%) rotateZ(180deg); transform-origin: bottom;}
}


/*slide*/
@keyframes slide-left-in{
  0% {left: 100%;}
  100% {left: 0;}
}

@keyframes slide-left-out{
  0% {left: 0;}
  100% {left: -100%;}
}


@keyframes slide-right-in{
  0% {left: -100%;}
  100% {left: 0;}
}

@keyframes slide-right-out{
  0% {left: 0;}
  100% {left: 100%;}
}


@keyframes slide-up-in{
  0% {top: 100%;}
  100% {top: 0;}
}

@keyframes slide-up-out{
  0% {top: 0;}
  100% {top: -100%;}
}


@keyframes slide-down-in{
  0% {top: -100%;}
  100% {top: 0;}
}

@keyframes slide-down-out{
  0% {top: 0;}
  100% {top: 100%;}
}


/*fold*/
@keyframes fold-left-in{
  0% {right: 0; width: 0; white-space: nowrap;}
  100% {right: 0; width: 100%; white-space: nowrap;}
}

@keyframes fold-left-out{
  0% {left: 0; width: 100%; white-space: nowrap;}
  100% {left: 0; width: 0; white-space: nowrap;}
}


@keyframes fold-right-in{
  0% {left: 0; width: 0; white-space: nowrap;}
  100% {left: 0; width: 100%; white-space: nowrap;}
}

@keyframes fold-right-out{
  0% {right: 0; width: 100%; white-space: nowrap;}
  100% {right: 0; width: 0; white-space: nowrap;}
}


@keyframes fold-up-in{
  0% {bottom: 0; height: 0; white-space: nowrap;}
  100% {bottom: 0; height: 100%; white-space: nowrap;}
}

@keyframes fold-up-out{
  0% {top: 0; height: 100%; white-space: nowrap;}
  100% {top: 0; height: 0; white-space: nowrap;}
}


@keyframes fold-down-in{
  0% {top: 0; height: 0; white-space: nowrap;}
  100% {top: 0; height: 100%; white-space: nowrap;}
}

@keyframes fold-down-out{
  0% {bottom: 0; height: 100%; white-space: nowrap;}
  100% {bottom: 0; height: 0; white-space: nowrap;}
}


/*shift*/
@keyframes shift-left-in{
  0% {transform: translateX(125%) scale(0.75);}
  25% {transform: translateX(125%) scale(0.75);}
  75% {transform: translateX(0) scale(0.75);}
  80% {transform: translateX(0) scale(0.75);}
  100% {transform: translateX(0) scale(1);}
}

@keyframes shift-left-out{
  0% {transform: translateX(0) scale(1);}
  20% {transform: translateX(0) scale(0.75);}
  25% {transform: translateX(0) scale(0.75);}
  75% {transform: translateX(-125%) scale(0.75);}
  80% {transform: translateX(-125%) scale(0.75);}
  100% {transform: translateX(-125%) scale(1);}
}


@keyframes shift-right-in{
  0% {transform: translateX(-125%) scale(0.75);}
  25% {transform: translateX(-125%) scale(0.75);}
  75% {transform: translateX(0) scale(0.75);}
  80% {transform: translateX(0) scale(0.75);}
  100% {transform: translateX(0) scale(1);}
}

@keyframes shift-right-out{
  0% {transform: translateX(0) scale(1);}
  20% {transform: translateX(0) scale(0.75);}
  25% {transform: translateX(0) scale(0.75);}
  75% {transform: translateX(125%) scale(0.75);}
  80% {transform: translateX(125%) scale(0.75);}
  100% {transform: translateX(125%) scale(1);}
}


@keyframes shift-up-in{
  0% {transform: translateY(125%) scale(0.75);}
  25% {transform: translateY(125%) scale(0.75);}
  75% {transform: translateY(0) scale(0.75);}
  80% {transform: translateY(0) scale(0.75);}
  100% {transform: translateY(0) scale(1);}
}

@keyframes shift-up-out{
  0% {transform: translateY(0) scale(1);}
  20% {transform: translateY(0) scale(0.75);}
  25% {transform: translateY(0) scale(0.75);}
  75% {transform: translateY(-125%) scale(0.75);}
  80% {transform: translateY(-125%) scale(0.75);}
  100% {transform: translateY(-125%) scale(1);}
}


@keyframes shift-down-in{
  0% {transform: translateY(-125%) scale(0.75);}
  25% {transform: translateY(-125%) scale(0.75);}
  75% {transform: translateY(0) scale(0.75);}
  80% {transform: translateY(0) scale(0.75);}
  100% {transform: translateY(0) scale(1);}
}

@keyframes shift-down-out{
  0% {transform: translateY(0) scale(1);}
  20% {transform: translateY(0) scale(0.75);}
  25% {transform: translateY(0) scale(0.75);}
  75% {transform: translateY(125%) scale(0.75);}
  80% {transform: translateY(125%) scale(0.75);}
  100% {transform: translateY(125%) scale(1);}
}