<main ontouchstart class="with-hover">
	<aside>
		<div></div>
		<svg viewBox="0 0 100 100">
			<g stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path d="M65.892702,73 C70.3362168,68.5836139 73.0845878,62.4824333 73.0845878,55.7432553 C73.0845878,49.0040774 70.3362168,42.9028968 65.892702,38.4865107 C61.4491873,34.0701246 55.3105288,31.338533 48.5299539,31.338533 C41.749379,31.338533 35.6107205,34.0701246 31.1672058,38.4865107 C26.723691,42.9028968 23.97532,49.0040774 23.97532,55.7432553 C23.97532,62.4824333 26.723691,68.5836139 31.1672058,73 C31.1672058,73 65.892702,73 65.892702,73 Z M73.0594097,62.3985471 C76.4680437,61.2200182 88.5607213,56.1793944 85.5117743,37.8371245 L81.6924976,37.9360303 C80.8526284,43.134546 77.152648,46.6051883 72.4845099,46.6051883 M24.4062209,60.319036 C24.3904842,60.3191058 24.3747393,60.3191408 24.3589862,60.3191408 C18.6378761,60.3191408 14,55.70958 14,50.0233985 C14,44.3372171 18.6378761,39.7276563 24.3589862,39.7276563 C26.0569266,39.7276563 27.6594543,40.133673 29.0736464,40.8533508 M65.8946819,38.4867877 L31.1652244,38.4844448 M37.6782363,44.9577899 C34.9010396,47.7180312 33.1833077,51.5312691 33.1833077,55.7432553 C33.1833077,59.9552416 34.9010396,63.7684794 37.6782363,66.5287208 M45.4606247,29.0505903 L51.5992831,29.0505903 M48.5299539,26 L48.5299539,31.338533"></path>
			</g>
		</svg>
		<div>
			<p id="intro-signup" class="active"><strong>Cup o' Tea</strong> is even better with&nbsp;an&nbsp;account.</p>
			<p id="intro-login">Welcome back to<br/><strong>Cup o' Tea</strong>!</p>
		</div>
	</aside>
	<section>
		<h1>
			<a id="link-signup" class="active">Sign Up</a>
			<a id="link-login">Log In</a>
		</h1>
		<form id="form-signup" class="active">
			<div>
				<fieldset>
					<div>
						<label for="name">Name</label>
						<input id="name" type="text" placeholder="Marcia Polo"/>
					</div>
				</fieldset>
				<fieldset>
					<div>
						<label for="email">Email</label>
						<input id="email" type="email" placeholder="marcia@polo.com"/>
					</div>
				</fieldset>
				<fieldset>
					<div>
						<label for="password">Password</label>
						<input id="password" type="password" placeholder="••••••••"/>
					</div>
				</fieldset>
			</div>

			<ul>
				<li>
					<button class="fb">Connect with Facebook</button>
				</li>
				<li>
					<button class="tw">Connect with Twitter</button>
				</li>
			</ul>
			
			<input type="submit" value="Sign Up"/>
		</form>
		<form id="form-login">
			<div>
				<fieldset>
					<div>
						<label for="email">Email</label>
						<input id="email" type="email" placeholder="marcia@polo.com"/>
					</div>
				</fieldset>
				<fieldset>
					<div>
						<label for="password">Password</label>
						<input id="password" type="password" placeholder="••••••••"/>
					</div>
				</fieldset>
			</div>

			<ul>
				<li>
					<button class="fb">Connect with Facebook</button>
				</li>
				<li>
					<button class="tw">Connect with Twitter</button>
				</li>
			</ul>
			
			<input type="submit" value="Log In"/>
		</form>
	</section>
</main>
$linen: #E9E2D5;
$oyster: #D4C1AB;
$pewter: #857567;
$lemon: #DFB72C;

$font: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$padding: 12px;

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
*:focus { outline: none!important; }
body, html { height: 100%; }
body {
	background: white;
	margin: 0;
	font-family: $font;
	color: $pewter;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

main {
	background: white;
	height: 100%;
	aside {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		align-content: center;
		justify-content: center;
		height: calc(100% / 3);
		padding: $padding;
		background: #DFB72C url('https://images.unsplash.com/photo-1443131307017-4097c8ac7763?dpr=2&auto=format&fit=crop&w=1500&h=1909&q=80&cs=tinysrgb') no-repeat center center / cover;
		div:empty {
			opacity: 0.5;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #DFB72C url('https://images.unsplash.com/photo-1443131307017-4097c8ac7763?dpr=2&auto=format&fit=crop&w=1500&h=1909&q=80&cs=tinysrgb') no-repeat center center / cover;
			background-blend-mode: screen;
		}
		svg {
			position: relative;
			margin-top: -$padding*2;
			width: 150px;
			height: 150px;
		}
		div:not(:empty) {
			position: relative;
			width: 100%;
			margin-top: -$padding*2;
		}
		p {
			position: relative;
			width: 100%;
			margin: 0;
			color: white;
			font-size: 18px;
			line-height: 1.2;
			text-align: center;
			text-shadow: 0 0 10px rgba($pewter, .5);
			strong {
				font-weight: 700;
			}
			&:nth-child(2) {
				position: absolute;
				top: 0;
				left: 0;
			}
			&.active {
				visibility: visible;
				opacity: 1;
				transform: none;
			}
			&:not(.active) {
				visibility: hidden;
				opacity: 0;
				transform: translateY(100px);
			}
		}
	}
	section {
		position: relative;
		height: calc(100% / 3 * 2);
		h1 {
			display: flex;
			justify-content: center;
			padding: $padding;
			color: $lemon;
			font-size: 28px;
			line-height: 1;
			text-align: center;
			text-transform: lowercase;
			a {
				display: block;
				margin: 0 $padding/2;
				cursor: pointer;
				transform: none;
				&:hover, &:focus {
					color: saturate(darken($oyster, 35%), 15%);
				}
				&:active {
					color: $pewter;
				}
				&.active {
					font-weight: 500;
				}
				&:not(.active) {
					font-weight: 300;
				}
			}
		}
		form {
			display: flex;
			flex-flow: row wrap;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: calc(100% - 40px);
			> div, > ul {
				width: 100%;
				padding: $padding/2;
			}
			fieldset {
				padding: $padding/2;
				div {
					display: flex;
					border-radius: 2px;
					overflow: hidden;
					label {
						display: block;
						margin: 0;
						padding: $padding/2 $padding*0.75;
						background: $lemon;
						color: white;
						font-size: 16px;
						cursor: pointer;
						line-height: 25px;
					}
					input {
						display: block;
						background: white;
						border: 1px solid $lemon;
						border-left: 0;
						border-radius: 0 2px 2px 0;
						box-shadow: none;
						margin: 0;
						padding: $padding/2 $padding*0.75;
						width: 100%;
						color: $pewter;
						font-family: $font;
						font-size: 16px;
						&::placeholder {
							color: rgba($pewter, .4);
						}
						&:focus {
							background: rgba($linen, .5);
							&::placeholder {
								color: rgba($pewter, .6);
							}
						}
					}
				}
			}
			li {
				padding: $padding/2;
				button {
					display: block;
					margin: 0 auto;
					appearance: none;
					font-family: $font;
					border: 0;
					border-radius: 100px;
					color: white;
					font-size: 16px;
					padding: $padding/2 $padding;
					cursor: pointer;
					&.fb {
						background: #3b5998;
						&:hover, &:focus {
							background: lighten(#3b5998, 15%);
						}
						&:active {
							background: darken(#3b5998, 15%);
						}
					}
					&.tw {
						background: #00aced;
						&:hover, &:focus {
							background: lighten(#00aced, 15%);
						}
						&:active {
							background: darken(#00aced, 15%);
						}
					}
				}
			}
			input[type="submit"] {
				display: block;
				align-self: flex-end;
				appearance: none;
				width: 100%;
				margin: 0;
				border: 0;
				border-radius: 0;
				font-family: $font;
				font-size: 24px;
				text-transform: lowercase;
				line-height: 2;
				background: $lemon;
				color: white;
				cursor: pointer;
				&:hover, &:focus {
					background: saturate(darken($oyster, 35%), 15%);
				}
				&:active {
					background: $pewter;
				}
			}
			&.active {
				opacity: 1;
				z-index: 1;
				fieldset, li, input[type="submit"] {
					transform: translateY(0px);
					opacity: 1;
				}
			}
			&:not(.active) {
				opacity: 0;
				z-index: 0;
				fieldset, li, input[type="submit"] {
					transform: translateY(100px);
					opacity: 0;
				}
			}
		}
	}
	&.with-hover {
		aside {
			p {
				transition: all 250ms ease-out;
			}
		}
		section {
			h1 {
				a {
					transition: all 150ms ease-out;
					&:hover, &:focus {
						transition: all 300ms ease-out;
					}
					&:active {
						transition: all 150ms ease-in;
					}
				}
			}
			form {
				transition: all 1000ms ease-out;
				fieldset, li, input[type="submit"] {
					transition: all 500ms ease-out;
				}
				button, input {
					transition: all 150ms ease-out;
					&:hover, &:focus {
						transition: all 300ms ease-out;
					}
					&:active {
						transition: all 150ms ease-in;
					}
				}
				&.active {
					&#form-signup {
						fieldset {
							&:nth-child(2) {
								transition-delay: 50ms;
							}
							&:nth-child(3) {
								transition-delay: 100ms;
							}
						}
						li {
							&:nth-child(1) {
								transition-delay: 150ms;
							}
							&:nth-child(2) {
								transition-delay: 200ms;
							}
						}
						input[type="submit"] {
							transition-delay: 250ms;
						}
					}
					&#form-login {
						fieldset {
							&:nth-child(2) {
								transition-delay: 50ms;
							}
						}
						li {
							&:nth-child(1) {
								transition-delay: 100ms;
							}
							&:nth-child(2) {
								transition-delay: 150ms;
							}
						}
						input[type="submit"] {
							transition-delay: 200ms;
						}
					}
				}
				&:not(.active) {
					&#form-signup {
						fieldset {
							&:nth-child(1) {
								transition-delay: 250ms;
							}
							&:nth-child(2) {
								transition-delay: 200ms;
							}
							&:nth-child(3) {
								transition-delay: 150ms;
							}
						}
						li {
							&:nth-child(1) {
								transition-delay: 100ms;
							}
							&:nth-child(2) {
								transition-delay: 50ms;
							}
						}
					}
					&#form-login {
						fieldset {
							&:nth-child(1) {
								transition-delay: 200ms;
							}
							&:nth-child(2) {
								transition-delay: 150ms;
							}
						}
						li {
							&:nth-child(1) {
								transition-delay: 100ms;
							}
							&:nth-child(2) {
								transition-delay: 50ms;
							}
						}
					}
				}
			}
		}
	}
	&.pre-enter {
		aside {
			transform-origin: center top;
			transform: scaleY(0);
			visibility: hidden;
			svg {
				transform-origin: center center;
				transform: scale(0) rotate(90deg);
				visibility: hidden;
			}
			p.active {
				opacity: 0;
				transform: translateY(100px);
				visibility: hidden;
			}
		}
		section {
			h1 {
				a {
					visibility: hidden;
					opacity: 0;
					&:first-child {
						transform-origin: right center;
						transform: translateX(200px) scaleX(0);
					}
					&:last-child {
						transform-origin: left center;
						transform: translateX(-200px) scaleX(0);
					}
				}
			}
			form {
				fieldset, li {
					opacity: 0;
					transform: translateY(100px);
					visibility: hidden;
				}
				input[type="submit"] {
					transform-origin: center bottom;
					transform: scaleY(0);
					color: $lemon;
					visibility: hidden;
				}
			}
		}
	}
	&.on-enter {
		aside {
			animation: scaleYIn 1000ms linear forwards;
			visibility: visible;
			svg {
				animation: bounceIn-rotate 1000ms linear forwards 250ms;
				visibility: visible;
			}
			p.active {
				animation: slideInUp-fadeIn 1000ms linear forwards 500ms;
				visibility: visible;
			}
		}
		section {
			h1 {
				a {
					visibility: visible;
					&:first-child {
						animation: scaleX-slideInRight 1000ms linear forwards 750ms;
					}
					&:last-child {
						animation: scaleX-slideInLeft 1000ms linear forwards 750ms;
					}
				}
			}
			form {
				fieldset, li {
					animation: slideInUp-fadeIn 1000ms linear forwards;
					visibility: visible;
				}
				fieldset {
					&:nth-child(1) {
						animation-delay: 1250ms;
					}
					&:nth-child(2) {
						animation-delay: 1350ms;
					}
					&:nth-child(3) {
						animation-delay: 1450ms;
					}
				}
				li {
					&:nth-child(1) {
						animation-delay: 1550ms;
					}
					&:nth-child(2) {
						animation-delay: 1650ms;
					}
				}
				input[type="submit"] {
					animation: scaleYIn 1000ms linear forwards 1750ms, lemon-white 250ms linear forwards 2150ms;
					visibility: visible;
				}
			}
		}
	}
}

@media only screen and (min-width: 624px) {
	body {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		background: desaturate(darken($pewter, 15%), 10%);
	}
	main {
		display: flex;
		border-radius: 2px;
		overflow: hidden;
		height: 100%;
		max-height: 400px;
		box-shadow: 0 0 10px rgba(desaturate(darken($pewter, 25%), 10%), 0.5);
		aside, section {
			height: 100%;
			width: 300px;
		}
		&.pre-enter {
			opacity: 0;
			visibility: hidden;
			aside {
				transform: none;
			}
		}
		&.on-enter {
			animation: slideDown-fadeIn 1000ms linear forwards;
			visibility: visible;
			aside {
				animation: none;
			}
		}
	}
}

@keyframes lemon-white {
	0% { color: $lemon; }
	100% { color: white; }
}

/* https://goo.gl/U6p2Ra */
@keyframes slideDown-fadeIn { 
	0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -400, 0, 1); opacity: 0; }
	4% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -227.213, 0, 1); }
	7.91% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -44.516, 0, 1); }
	11.91% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 75.765, 0, 1); }
	15.82% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 110.328, 0, 1); opacity: 1; }
	20.42% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 78.474, 0, 1); }
	24.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.745, 0, 1); }
	29.53% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.119, 0, 1); }
	34.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -27.704, 0, 1); }
	43.14% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.859, 0, 1); }
	52.15% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.958, 0, 1); }
	70.37% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.747, 0, 1); }
	88.59% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.439, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } 
}

/* https://goo.gl/gsBg5l */
@keyframes scaleYIn { 
	0% { transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	4% { transform: matrix3d(1, 0, 0, 0, 0, 0.432, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	7.91% { transform: matrix3d(1, 0, 0, 0, 0, 0.889, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	11.91% { transform: matrix3d(1, 0, 0, 0, 0, 1.189, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	15.82% { transform: matrix3d(1, 0, 0, 0, 0, 1.276, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	20.42% { transform: matrix3d(1, 0, 0, 0, 0, 1.196, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	24.92% { transform: matrix3d(1, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	29.53% { transform: matrix3d(1, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	34.03% { transform: matrix3d(1, 0, 0, 0, 0, 0.931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	43.14% { transform: matrix3d(1, 0, 0, 0, 0, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	52.15% { transform: matrix3d(1, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	70.37% { transform: matrix3d(1, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	88.59% { transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

/* https://goo.gl/XC1o6q */
@keyframes scaleX-slideInLeft {
	0% { transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 0; }
	5.71% { transform: matrix3d(0.354, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -44.297, 0, 0, 1); }
	6.31% { transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -45.449, 0, 0, 1); }
	11.31% { transform: matrix3d(0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -42.536, 0, 0, 1); }
	12.51% { transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.889, 0, 0, 1); }
	17.02% { transform: matrix3d(0.735, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.059, 0, 0, 1); }
	18.82% { transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -23.316, 0, 0, 1); }
	22.62% { transform: matrix3d(0.832, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.419, 0, 0, 1); }
	25.03% { transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.822, 0, 0, 1); }
	28.33% { transform: matrix3d(0.895, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.859, 0, 0, 1); }
	33.93% { transform: matrix3d(0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.401, 0, 0, 1); opacity: 1; }
	37.54% { transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.162, 0, 0, 1); }
	45.15% { transform: matrix3d(0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.335, 0, 0, 1); }
	50.05% { transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.109, 0, 0, 1); }
	72.57% { transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.773, 0, 0, 1); }
	75.08% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.613, 0, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } 
}

/* https://goo.gl/4dYUn6 */
@keyframes scaleX-slideInRight {
	0% { transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 0; }
	5.71% { transform: matrix3d(0.354, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 44.297, 0, 0, 1); }
	6.31% { transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 45.449, 0, 0, 1); }
	11.31% { transform: matrix3d(0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 42.536, 0, 0, 1); }
	12.51% { transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.889, 0, 0, 1); }
	17.02% { transform: matrix3d(0.735, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.059, 0, 0, 1); }
	18.82% { transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.316, 0, 0, 1); }
	22.62% { transform: matrix3d(0.832, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.419, 0, 0, 1); }
	25.03% { transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.822, 0, 0, 1); }
	28.33% { transform: matrix3d(0.895, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.859, 0, 0, 1); }
	33.93% { transform: matrix3d(0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.401, 0, 0, 1); opacity: 1; }
	37.54% { transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.162, 0, 0, 1); }
	45.15% { transform: matrix3d(0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.335, 0, 0, 1); }
	50.05% { transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.109, 0, 0, 1); }
	72.57% { transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.773, 0, 0, 1); }
	75.08% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.613, 0, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } 
}

/* https://goo.gl/lNPiqQ */
@keyframes slideInUp-fadeIn { 
	0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 100, 0, 1); opacity: 0; }
	5.81% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 51.656, 0, 1); }
	11.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 11.991, 0, 1); }
	17.42% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.985, 0, 1); }
	23.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -14.246, 0, 1); }
	30.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.789, 0, 1); }
	37.44% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.262, 0, 1); }
	44.54% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.625, 0, 1); opacity: 1; }
	51.65% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.624, 0, 1); }
	80.28% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.185, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } 
}

/* https://goo.gl/mrRSVv */
@keyframes bounceIn-rotate { 
	0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	4% { transform: matrix3d(0.174, -0.395, 0, 0, 0.395, 0.174, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	6.31% { transform: matrix3d(0.405, -0.588, 0, 0, 0.588, 0.405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	7.91% { transform: matrix3d(0.583, -0.67, 0, 0, 0.67, 0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	11.91% { transform: matrix3d(0.965, -0.695, 0, 0, 0.695, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	12.51% { transform: matrix3d(1.006, -0.681, 0, 0, 0.681, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	15.82% { transform: matrix3d(1.145, -0.564, 0, 0, 0.564, 1.145, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	18.82% { transform: matrix3d(1.159, -0.435, 0, 0, 0.435, 1.159, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	20.42% { transform: matrix3d(1.137, -0.371, 0, 0, 0.371, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	24.92% { transform: matrix3d(1.034, -0.23, 0, 0, 0.23, 1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	25.03% { transform: matrix3d(1.032, -0.227, 0, 0, 0.227, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	29.53% { transform: matrix3d(0.949, -0.142, 0, 0, 0.142, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	34.03% { transform: matrix3d(0.926, -0.095, 0, 0, 0.095, 0.926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	37.54% { transform: matrix3d(0.941, -0.071, 0, 0, 0.071, 0.941, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	43.14% { transform: matrix3d(0.984, -0.045, 0, 0, 0.045, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	50.05% { transform: matrix3d(1.016, -0.025, 0, 0, 0.025, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	52.15% { transform: matrix3d(1.017, -0.021, 0, 0, 0.021, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	70.37% { transform: matrix3d(0.996, -0.003, 0, 0, 0.003, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	75.08% { transform: matrix3d(0.997, -0.002, 0, 0, 0.002, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	88.59% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}
View Compiled
$("main").addClass("pre-enter").removeClass("with-hover");
setTimeout(function(){
	$("main").addClass("on-enter");
}, 500);
setTimeout(function(){
	$("main").removeClass("pre-enter on-enter");
	setTimeout(function(){
		$("main").addClass("with-hover");
	}, 50);
}, 3000);

$("h1 a").click(function(){
	$(this).siblings().removeClass("active");
	$(this).addClass("active");
	if ($(this).is("#link-signup")) {
		$("#form-login").removeClass("active");
		$("#intro-login").removeClass("active");
		setTimeout(function(){
			$("#form-signup").addClass("active");
			$("#intro-signup").addClass("active");
		}, 50);
	} else {
		$("#form-signup").removeClass("active");
		$("#intro-signup").removeClass("active");
		setTimeout(function(){
			$("#form-login").addClass("active");
			$("#intro-login").addClass("active");
		}, 50);
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js