@keyframes top-to-bottom-anim{ 
	from { opacity: 0; transform: translate3d(0, 5%, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bottom-to-top-anim{ 
	from { opacity: 0; transform: translate3d(0, -5%, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes scale-down-anim{ 
	from { opacity: 0; transform: scale(1.05); }
	100%{ opacity: 1; transform: scale(1); }
}

@keyframes scale-up-anim{ 
	from { opacity: 0; transform: scale(.9); }
	100%{ opacity: 1; transform: scale(1); }
}

@keyframes right-to-left-anim{ 
	from { opacity: 0; transform: translate3d(30%, 0, 0); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes left-to-right-anim{ 
	from { opacity: 0; transform: translate3d(-30%, 0, 0); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rotate-to-right-anim{ 
	from { opacity: 0; transform-origin: -200% top; transform: rotateY(10deg); }
	100%{ opacity: 1; transform-origin: -200% top; transform: rotateY(0deg); }
}

@keyframes rotate-to-left-anim{ 
	from { opacity: 0; transform-origin: -200% top; transform: rotateY(-10deg); }
	100%{ opacity: 1; transform-origin: -200% top; transform: rotateY(0deg); }
}

@keyframes rotate-to-top-anim{ 
	from { opacity: 0; transform-origin: left top; transform: rotateX(-30deg); }
	100%{ opacity: 1; transform-origin: left top; transform: rotateY(0deg); }
}

@keyframes rotate-to-bottom-anim{ 
	from { opacity: 0; transform-origin: left bottom; transform: rotateX(30deg); }
	100%{ opacity: 1; transform-origin: left bottom; transform: rotateY(0deg); }
}

.top-to-bottom,
.bottom-to-top,
.scale-down,
.scale-up,
.right-to-left,
.left-to-right,
.rotate-to-right,
.rotate-to-left,
.rotate-to-top,
.rotate-to-bottom{ animation-duration: .6s ; animation-fill-mode: forwards ; animation-timing-function: ease-in-out; }

.bottom-to-top{ animation-name: bottom-to-top-anim; }

.top-to-bottom{ animation-name: top-to-bottom-anim; }

.scale-down{ animation-name: scale-down-anim; }

.scale-up{ animation-name: scale-up-anim; }

.right-to-left{ animation-name: right-to-left-anim; }

.left-to-right{ animation-name: left-to-right-anim; }

.rotate-to-right{ animation-name: rotate-to-right-anim; }

.rotate-to-left{ animation-name: rotate-to-left-anim; }

.rotate-to-top{ animation-name: rotate-to-top-anim; }

.rotate-to-bottom{ animation-name: rotate-to-bottom-anim; }