CodePen Embed - Funktionale Animation: Multistep Login Formular (MM-SYS-2)

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <form id="formwrapper">


    <!-- Progressbar -->

    <ul id="progressbar">
      <li class="active">Username</li>
      <li>Account</li>
      <li>Data</li>
      <li>Career</li>
    </ul>
   

    <!-- Login Form Divs -->
    <!-- Username -->
    <fieldset>
      <h2 class="login-title">Welcome!</h2>
      <h3 class="login-subtitle">First select a Username.</h3>
      <input type="text" 
             id="username" 
             placeholder="Username" 
             title='The username is required, everything else is voluntary!'
             required/>
      <!--<i class="fa fa-user"></i>-->
      <input type="button" name="next" class="next button" value="Next">
    </fieldset>
    <!-- Password -->
    <fieldset>
      <h2 class="login-title user"></h2>
      <h3 class="login-subtitle">Now setup your Account.</h3>
      <input type="email"
             class="form"
             id="email"
             title=''
             placeholder="Email"/>
      <input type="password" 
             class="form"
             id="password" 
             placeholder="Password" 
             title=''/>
      <input type="password"
             class="form"
             id="password" 
             pattern='\w{6,}' 
             placeholder="Confirm Password" 
             title=''/>
      <!--<i class="fa fa-lock"></i>-->
      <input type="button" name="previous" class="previous button" value="Previous">
      <input type="button" name="next" class="next button" value="Next">
    </fieldset>
    <!-- Phone -->
    <fieldset>
      <h2 class="login-title">Personal Data</h2>
      <h3 class="login-subtitle">Next insert your personal Data.</h3>
      <input type="text" 
             id="fullname" 
             placeholder="Fullname" 
             title=''/>
      <input type="text" 
             id="adress" 
             placeholder="Adress" 
             title=''/>
      <input type='tel' 
             class="form"
             id="tel"  
             title=''
             placeholder="Phonenumber" 
             required>
      <!--<i class="fa fa-phone"></i>-->
      <input type="button" name="previous" class="previous button" value="Previous">
      <input type="button" name="next" class="next button" value="Next">
    </fieldset>
    <!-- Email -->
    <fieldset>
      <h2 class="login-title">Career</h2>
      <h3 class="login-subtitle">What do you study? And where?</h3>     
      <input type="text" 
             id="course" 
             placeholder="Informationmanagement" 
             title=''/>
      <input type="text" 
             id="university" 
             placeholder="Hochschule Hannover"
             title=''/>
      <!--<i class="fa fa-envelope"></i>-->
      <input type="button" name="previous" class="previous button" value="Previous">
      <input type="button" name="submit" class="submit button" value="Done!">
    </fieldset>


  </form>

 
  
</body>

html {
	height: 100%;
	

}

#progressbar{
  margin-bottom: 30px;
  counter-reset: step;
  overflow: hidden;
}
#progressbar li{
  list-style-type: none;
  float:left;
  width:25%;
  position:relative;
  text-align: center;
}
#progressbar li:before{
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  width: 30px;
  height: 30px;
  border: 3px solid #ddd;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}
#progressbar li:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #ddd;
  top: 15px;
  left: -50%;
  z-index: -1;
}
#progressbar li:first-child:after{
  content: none; 
}
#progressbar li.active{
  color: #2267CB;
}
#progressbar li.active:before{
  border-color: #2267CB;
}
#progressbar li.active + li:after{
  background-color: #2267CB;
}
#formwrapper{
	width: 400px;
	margin: 50px auto;
	text-align: center;
	position: relative;
  border-radius: 10px;
  opacity: 0%;
  position: relative;
}
#formwrapper fieldset{
	background: #eee;
	border: 0 none;
	border-radius: 10px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.3);
  padding: 20px 40px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 10%;
  position: relative;
}

.login-title {
	font-size: 25px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.login-subtitle {
	font-weight: normal;
	font-size: 20px;
	color: #666;
	margin-bottom: 20px;
}
#formwrapper fieldset:not(:first-of-type) {
	display: none;
}

.input{
	width: 100%;
	height: 50px;
	position: relative;
	margin: 15px auto;
  
}

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"]{
	width: 100%;
	height: 50px;
	position: relative;
	outline: none;
	border:2px solid #ddd;
  padding-left: 10px;
	border-radius: 10px;
	font-size: 16px;
	font-family: sans-serif,Arial;
	color: gray;
}
.fa{
	position: absolute;
	right: 5px;
	top: 16px;
	color: gray;
  
}

input:focus{
	border:1px solid gray;
}
.input:hover .fa{
  animation: pulse 3s infinite linear;
}
input[type="submit"]{
	width: 100%;
	height: 50px;
	background: #0AC986;
	font-family: sans-serif,Arial;
	font-size: 16px;
	color: #fff;
	outline: none;
	border-radius: 4px;
	border: 0px;
	cursor: pointer;
}
input title{
  display: hidden;
}
#formwrapper .button{
  width: 100px;
	background: #2267CB;
	font-weight: bold;
  font-family: sans-serif,Arial;
  font-size: 16px;
	color: white;
	border: 0 none;
	border-radius: 4px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
  transition: opacity 0.8s;
}
#formwrapper .button:hover{
  opacity: 0.9;
}
.error-msg{
	font-size: 16px;
	font-family: sans-serif,Arial;
	color: red;
	margin-top:50px;
	display: none;
}
.error{
	position: relative;
	animation : shake 0.2s;

}
@keyframes shake{
	0% , 100%{
		left: 0px;
	}
	20% , 80%{
		left: -15px;
	}
	40% , 60%{
		left:15px;
	}
	
}
@keyframes pulse{
      0%, 100%{
        color: gray;		
      }
      50%{
        color: #2267CB;
      }
  }
}

var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating; 





$(".next").click(function(){
  current_fs = $(this).parent();
  next_fs = $(this).parent().next();


  if($("#username").val() == ""){
    $("#username").addClass("error");
    setTimeout(function(){
      $("#username").removeClass("error");
    }, 2000);
  }
  else{
    if(animating) return false;
    animating = true;


    username = $("#username").val();
    $(".user").empty();
    $(".user").text($(".user").text() + "Hello " + username + '!');






    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");   
    next_fs.show();     
    current_fs.animate({opacity: 0}, {
      step: function(now, mx) {

        scale = 1 - (1 - now) * 0.2;        
        left = (now * 50)+"%";
        opacity = 1 - now;
        current_fs.css({
          'transform': 'scale('+scale+')',
          'position': 'absolute'
        });
        next_fs.css({'left': left, 'opacity': opacity});
      }, 
      duration: 800, 
      complete: function(){
        current_fs.hide();
        animating = false;

      },
      easing: 'easeInOutBack'

    });
  }});

$(".previous").click(function(){
  if(animating) return false;
  animating = true;

  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();
  $(".user").empty();
  $(".user").text($(".user").text() + "Hello " + username + '!');
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

  previous_fs.show(); 
  current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
      scale = 0.8 + (1 - now) * 0.2;
      left = ((1-now) * 50)+"%";
      opacity = 1 - now;
      current_fs.css({'left': left});
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
      current_fs.hide();
      animating = false;
    }, 
    easing: 'easeInOutBack'
  });
});

$(".submit").click(function(){
  return false;
})

This Pen is owned by I. Melnik on CodePen.

See more by @IM123 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript