LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

	
CSS
/* Reset */
* {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	box-sizing: border-box;
	border: 0;
	outline: 0;
}


/* General */
body {
	width: 100%;
	font-family: Roboto, sans-serif;
	background: #3b4465;
}

button {
	position: relative;
	width: 160px;
	text-transform: uppercase;
	font-size: 14px;
	background-color: transparent;
}

form {
  position: relative;
	width: 260px;
	height: 280px;
	padding: 20px;
	background: #d7e7f1;
	border-radius: 5px;
}

form label, form input {
	display: block;
	opacity: 0;
}

legend {
  position: absolute;
  top: 0;
  left: -10000px;
}

label {
	padding-top: 15px;
	font-size: 14px;
	color: #a1b4b4;
	letter-spacing: 0.5px;
}

input:not([type="submit"]) {
	width: 220px;
	margin: 5px auto 0;
	padding: 0 15px;
	line-height: 40px;
	font-size: 14px;
	color: #3b4465;
	background: #eef9fe;
	border: 1px solid #cddbef;
	border-radius: 2px;
}

input[type="submit"] {
	float: right;
	width: 120px;
	margin-top: 30px;
	line-height: 40px;
	font-size: 18px;
	border-radius: 20px;
}


/* Buttons and Inputs */
.buttons,
.forms {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	width: 550px;
	margin: 0 auto;
}

.buttons {
	height: 100px;
	padding-top: 70px;
	text-align: center;
}

.forms {
  padding-top: 50px;
}

.log-link,
.sign-link {
  cursor: pointer;
  color: #bbb;
}

.log-link.login-button-active,
.sign-link.signup-button-active {
  cursor: default;
  color: #fff;
}

.login-underline,
.signup-underline {
	position: absolute;
	top: 35px;
	left: 30px;
	height: 2px;
	width: 100px;
	opacity: 0;
	background: #c8dfed;
}

.login-underline.login-button-active {
	animation: loginUnderlineActive .2s linear .1s forwards;
	transform-origin: right;
}

.login-underline.signup-button-active {
	animation: loginUnderlineInactive .3s linear forwards;
	transform-origin: right;
}

.signup-underline.signup-button-active {
	animation: signupUnderlineActive .2s linear .1s forwards;
	transform-origin: left;
}

.signup-underline.login-button-active {
	animation: signupUnderlineInactive .3s linear forwards;
	transform-origin: left;
}

.login-button-active {
  animation: buttonsMoveToRight .3s linear forwards;
}

.signup-button-active {
  animation: buttonsMoveToLeft .3s linear forwards;
}

.login-form.login-button-active label,
.login-form.login-button-active input {
  animation: fielsetSlideToRight .5s linear 0.25s forwards;
}

.signup-form.signup-button-active label,
.signup-form.signup-button-active input {
  animation: fieldsetSlideToLeft .5s linear 0.25s forwards;
}

.login-form input[type="submit"] {
	color: #fbfdff;
	background: #a7e245;
}

.signup-form input[type="submit"] {
	color: #a7e245;
	background: #fbfdff;
	box-shadow: inset 0 0 0 2px #a7e245;
}

.login-form {
  animation: loginToBottom .4s linear forwards;
}

.signup-form {
  animation: signUpToBottom .4s linear forwards;
}

.login-form.login-button-active {
  animation: loginToTop .4s linear forwards;
}

.signup-form.signup-button-active {
  animation: signUpToTop .4s linear forwards;
}


/* Animations */
@keyframes loginUnderlineActive {
	0% {
		transform: scale(0);
		opacity: 1;
	}
  
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes signupUnderlineActive {
	0% {
		transform: scale(0);
		opacity: 1;
	}
  
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes loginUnderlineInactive {
	0% {
		transform: scale(1);
		opacity: 1;
	}
  
	100% {
		transform: scale(0);
		opacity: 1;
	}
}

@keyframes signupUnderlineInactive {
	0% {
		transform: scale(1);
		opacity: 1;
	}
  
	100% {
		transform: scale(0);
		opacity: 1;
	}
}

@keyframes buttonsMoveToRight {
	0% {
		transform: translate(0);
	}
  
	100% {
		transform: translate(50px);
	}
}

@keyframes buttonsMoveToLeft {
	0% {
		transform: translate(0);
	}
  
	100% {
		transform: translate(-50px);
	}
}

@keyframes fielsetSlideToRight {
	0% {
		transform: translate(-15px);
		opacity: 0;
	}
  
	100% {
		transform: translate(0);
		opacity: 1;
	}
}

@keyframes fieldsetSlideToLeft {
	0% {
		transform: translate(15px);
		opacity: 0;
	}
  
	100% {
		transform: translate(0);
		opacity: 1;
	}
}

@keyframes loginToBottom {
	0% {
		transform: translate(100px);
		z-index: 10;
		background-color: #fff;
	}
  
	49% {
		transform: translate(0);
		z-index: 10;
	}
  
	50% {
		transform: translate(0);
		z-index: 1;
	}
  
	100% {
		transform: translate(100px, 20px);
		z-index: 1;
		background-color: #d7e7f1;
	}
}

@keyframes signUpToBottom {
	0% {
		transform: translate(-100px);
		z-index: 10;
		height: 360px;
		background-color: #fff;
	}
  
	49% {
		transform: translate(0);
		z-index: 10;
	}
  
	50% {
		transform: translate(0);
		z-index: 1;
	}
  
	100% {
		transform: translate(-100px, 20px);
		z-index: 1;
		height: 280px;
		background-color: #d7e7f1;
	}
}

@keyframes loginToTop {
	0% {
		transform: translate(100px, 20px);
		z-index: 1;
		background-color: #d7e7f1;
	}
  
	49% {
		transform: translate(0);
		z-index: 1;
	}
  
	50% {
		transform: translate(0);
		z-index: 10;
	}
  
	100% {
		transform: translate(100px);
		z-index: 10;
		background-color: #fff;
	}
}

@keyframes signUpToTop {
	0% {
		transform: translate(-100px, 20px);
		z-index: 1;
		background-color: #d7e7f1;
	}
  
	25% {
    height: 280px;
  }
  
	49% {
		transform: translate(0);
		z-index: 1;
	}
  
	50% {
		transform: translate(0);
		z-index: 10;
	}
	100% {
		transform: translate(-100px);
		z-index: 10;
		height: 360px;
		background-color: #fff;
	}
}
JS
var buttons = document.querySelector('.buttons');
var loginButton = document.querySelector('.log-link');
var signupButton = document.querySelector('.sign-link');
var activeElements = document.querySelectorAll('[data-action="animated"]');

buttons.addEventListener('click', switcher);

function switcher(e) {
  if(e.target == loginButton) {
    for (var i = 0; i < activeElements.length; i++) {
      activeElements[i].classList.remove('signup-button-active');
      activeElements[i].classList.add('login-button-active');
    }
  } else if(e.target == signupButton) {
    for (var i = 0; i < activeElements.length; i++) {
      activeElements[i].classList.remove('login-button-active');
      activeElements[i].classList.add('signup-button-active');
    }
  }
}

// OR

/*var loginButton = document.querySelector('.log-link');
var signupButton = document.querySelector('.sign-link');
var activeElements = document.getElementsByName('animated');

loginButton.onclick = function() {
  for (var i = 0; i < activeElements.length; i++) {
    activeElements[i].classList.remove('signup-button-active');
    activeElements[i].classList.add('login-button-active');
  }
}

signupButton.onclick = function() {
  for (var i = 0; i < activeElements.length; i++) {
    activeElements[i].classList.remove('login-button-active');
    activeElements[i].classList.add('signup-button-active');
  }
}*/
Host Instantly Drag and Drop Website Builder

 

Description

Registration form with pure CSS animations. Idea by Gal Shir.
Term
Wed, 11/29/2017 - 11:24

Related Codes

Pen ID
Pen ID
Pen ID