Log In interaction animation with material design

index.html

<div id="wrapper">
  <h1>log in</h1>
  <form action="">
    <div class="placeholder">E-mail address</div>
    <input type="email" class="email" required>
    <div class="placeholder">Password</div>
    <input type="password" class="password" required>
    <div id="submit">send</div>
  </form>
</div>

Log In interaction animation with material design.markdown

Log In interaction animation with material design

Created this based off of https://dribbble.com/shots/2056935-Login-form?list=shots&sort=popular&timeframe=now&offset=534

A Pen by Irem Lopsum on CodePen.

License.

script.js

$("input").focus(function() {
  $(this).prev(".placeholder").addClass("active");
})

$(".send").focus(function() {
  $("input[type=submit]").addClass("active");
})

$("#submit").click(function() {
  $("#submit").addClass("active");
  $("#wrapper").addClass("active");
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$white: #fff;
$dark: #384D63;
$gray: #BDC3C7;
$green: #2ECC71;
$red: #c0392b;

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family: 'Raleway';
	background-color: $green;
}

* {
	box-sizing: border-box;
}

#wrapper {
	width: 400px;
	height: 380px;
	background-color: $white;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	
	h1 {
		font-weight: 800;
		font-size: 1.7em;
		color: $gray;
		text-transform: uppercase;
		letter-spacing: 5px;
		text-align: center;
		padding-top: 30px;
		padding-bottom: 10px;
	}
	
	input[type="email"], input[type="password"] {
		width: 80%;
		margin-left: 0%;
		position: relative;
		border: none;
		border-bottom: 1px solid $gray;
		font-family: 'Raleway';
		font-size: 1.3em;
		padding: 10px;
		color: $dark;
		transition: all .2s ease-out; 
		font-weight: 500;
		
		&:focus {
			outline: none;
			border-bottom: 3px solid $gray;
			transition: all .2s ease-out; 
		}
		
		&:required:valid {
			border-bottom: 3px solid $green;
			transition: all .2s ease-in-out; 
		}
	} 
	
	input[type="password"] {
		margin-top: 20px;
	}
	
	#submit {
		width: 80%;
		margin-left: 10%;
		position: relative;
		margin-top: 40px;
		border: none;
		background-color: $gray;
		font-family: 'Raleway';
		color: $white;
		font-weight: 500;
		font-size: 1.5em;
		padding: 20px;
		cursor: pointer;
	}
	
	#submit.active {
		animation-name: bounce;
 		animation-duration: .5s;
 		animation-iteration-count: 1;
 		animation-direction: alternate;
 		animation-timing-function: ease-in;
 		animation-fill-mode: forwards;
	}
		
	.placeholder {
		margin-left: 5%;
		padding-left: 30px;
		position: absolute;
		z-index: 9999;
		font-size: .9em;
		color: $gray;
		
		&:nth-child(1) {
			margin-top: 15px;
		}
		
		&:nth-child(1n + 2) {
			margin-top: 35px;
		}
	}
	
	.placeholder.active {
		color: $green;
		font-size: .8em;
		transition: all .2s ease-in-out;
		
		&:nth-child(1) {
			margin-top: -10px;
		}
		
		&:nth-child(1n + 2) {
			margin-top: 10px;
		}
	}
}

#wrapper.active {
	animation-name: away;
 	animation-duration: .9s;
 	animation-iteration-count: 1;
 	animation-direction: alternate;
 	animation-timing-function: ease-in;
 	animation-fill-mode: forwards;
 	animation-delay: .5s;
}

@keyframes away {
	0% {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1) translate(0%, 0%);
	}
	
	65% {
		transform: rotateX(-360deg) rotateY(0deg) rotateZ(0deg) scale(0.5) translate(0%, 0%);
	}
	
	69% {
		transform: rotateX(-360deg) rotateY(0deg) rotateZ(0deg) scale(0.5) translate(0%, 0%);
	}
	
	100% {
		transform: rotateX(-360deg) rotateY(0deg) rotateZ(0deg) scale(0.5) translate(0%, -300%);
	}
}

@keyframes bounce {
	0% {
    	transform: scale3d(1, 1, 1);
  	}

	30% {
	    transform: scale3d(1.25, 0.75, 1);
	}

  	40% {
	    transform: scale3d(0.75, 1.25, 1);
  	}

  	50% {
	    transform: scale3d(1.15, 0.85, 1);
		background-color: $gray;
  	}

  	65% {
	    transform: scale3d(.95, 1.05, 1);
  	}

  	75% {
	    transform: scale3d(1.05, .95, 1);
  	}

  	100% {
	    transform: scale3d(1, 1, 1);
		background-color: $green;
  	}
}