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

@if $use-flip == true {

	@-webkit-keyframes flip {
		0% {
			-webkit-transform: perspective($flipper-perspective) rotateY(0);
			-webkit-animation-timing-function: ease-out;
		}
		40% {
			-webkit-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
			-webkit-animation-timing-function: ease-out;
		}
		50% {
			-webkit-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
			-webkit-animation-timing-function: ease-in;
		}
		80% {
			-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
			-webkit-animation-timing-function: ease-in;
		}
		100% {
			-webkit-transform: perspective($flipper-perspective) scale(1);
			-webkit-animation-timing-function: ease-in;
		}
	}

	@-moz-keyframes flip {
		0% {
			-moz-transform: perspective($flipper-perspective) rotateY(0);
			-moz-animation-timing-function: ease-out;
		}
		40% {
			-moz-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
			-moz-animation-timing-function: ease-out;
		}
		50% {
			-moz-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
			-moz-animation-timing-function: ease-in;
		}
		80% {
			-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
			-moz-animation-timing-function: ease-in;
		}
		100% {
			-moz-transform: perspective($flipper-perspective) scale(1);
			-moz-animation-timing-function: ease-in;
		}
	}

	@-o-keyframes flip {
		0% {
			-o-transform: perspective($flipper-perspective) rotateY(0);
			-o-animation-timing-function: ease-out;
		}
		40% {
			-o-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
			-o-animation-timing-function: ease-out;
		}
		50% {
			-o-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
			-o-animation-timing-function: ease-in;
		}
		80% {
			-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
			-o-animation-timing-function: ease-in;
		}
		100% {
			-o-transform: perspective($flipper-perspective) scale(1);
			-o-animation-timing-function: ease-in;
		}
	}

	@keyframes flip {
		0% {
			transform: perspective($flipper-perspective) rotateY(0);
			animation-timing-function: ease-out;
		}
		40% {
			transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
			animation-timing-function: ease-out;
		}
		50% {
			transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
			animation-timing-function: ease-in;
		}
		80% {
			transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
			animation-timing-function: ease-in;
		}
		100% {
			transform: perspective($flipper-perspective) scale(1);
			animation-timing-function: ease-in;
		}
	}

	.flip {
		@include animate-prefixer(transform-style, preserve-3d);
		@include animate-prefixer(backface-visibility, visible !important);
		@include animate-prefixer(animation-name, flip)
	}

}