datamad2017/_sass/vendor/animations/flippers/_flipInY.scss

@if $use-flipInY == true {

	@-webkit-keyframes flipInY {
		0% {
			-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
			opacity: 0;
		}

		40% {
			-webkit-transform: perspective($flipper-perspective) rotateY(-$flipper-degrees);
		}

		70% {
			-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees);
		}

		100% {
			-webkit-transform: perspective($flipper-perspective) rotateY(0deg);
			opacity: 1;
		}
	}

	@-moz-keyframes flipInY {
		0% {
			-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
			opacity: 0;
		}

		40% {
			-moz-transform: perspective($flipper-perspective) rotateY(-$flipper-degrees);
		}

		70% {
			-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees);
		}

		100% {
			-moz-transform: perspective($flipper-perspective) rotateY(0deg);
			opacity: 1;
		}
	}

	@-o-keyframes flipInY {
		0% {
			-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
			opacity: 0;
		}

		40% {
			-o-transform: perspective($flipper-perspective) rotateY(-$flipper-degrees);
		}

		70% {
			-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees);
		}

		100% {
			-o-transform: perspective($flipper-perspective) rotateY(0deg);
			opacity: 1;
		}
	}

	@keyframes flipInY {
		0% {
			transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
			opacity: 0;
		}

		40% {
			transform: perspective($flipper-perspective) rotateY(-$flipper-degrees);
		}

		70% {
			transform: perspective($flipper-perspective) rotateY($flipper-degrees);
		}

		100% {
			transform: perspective($flipper-perspective) rotateY(0deg);
			opacity: 1;
		}
	}

	.flipInY {
		@include animate-prefixer(backface-visibility, visible !important);
		@include animate-prefixer(animation-name, flipInY);
	}
}