<div class="ani">
  <div class="loader"></div>
<div class="container">
  <h2>Login</h2>
  <div class="inputcontainer"> 
    <div class="style">
      <input class="input" type="text" name="name" required />
      <label for="Name">Name</label>
    </div>
    <div class="style">
      <input class="input" type="password" name="password" required />  
      <label for="Password">password</label> 
    </div>  
    <div class="btn">Login</div> 
  </div>
    <svg class="checkmark" width="70" height="70"><path d="m31.5,46.5l15.3,-23.2"/><path d="m31.5,46.5l-8.5,-7.1"/></svg>
  <div class="welcome">
    <h2>Welcome back!</h2>
    <p>Enjoy your stay!</p>
  </div>
    <p class="name">Login form by - Rune</p> 
  </div>
</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700); 

$buttonclr: #ea3e70; 

body{
  background-image: url(http://artplague.dk/codepen/MZJ5I24K0T.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Titillium Web', sans-serif;
  height: 100vh;
}

.checkmark{
  opacity: 0;
  stroke: #fff;
	stroke-linecap: round;
	stroke-width: 4;
  color:#fff;
  stroke: #1ECD97;
	stroke-width: 3;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

h2{
  color: #fff;
  font-weight: 700;
  margin-bottom:10px;
}
.ani{ 
    position: relative;
    perspective: 1800;
    .loader{
      position: absolute;
      display:none;
      right:0;
      left:0;
      top:0;
      bottom:0;
      margin: auto;
      height: 60px;
      width:60px;
      border: 3px solid white;
      border-radius: 50px;
      transform-origin: 50% 50%;
      animation: puff ease-out .9s infinite;
  }
}

.container{
  height: 300px;
  width: 500px;
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  background: radial-gradient(circle farthest-side at right bottom, rgba(157,164,174,0.9), rgba(98,99,104,0.9) 40%, rgba(121,121,121, 0.9) 99%);
  display: flex;
  margin-top:50px;
  flex-direction: column;
  align-items: center;
  opacity:0;
  transition: .6s all cubic-bezier(.77,0,.175,1);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transform: rotateX(40deg) translateY(-80px);
  
  &.fadeIn{
    opacity: 1;
    transform: rotateX(0deg);
  }
  
  &.validate{
    transform: rotateY(60deg)translateZ(-380px);
  }
  
  &.confirm{
    .style, .loaderContainer{
      
    }
    .checkmark{
       animation: scaleUpDown 1s ease-out 1 forwards;
       animation-delay:3s;
      }
  }
  
  .inputcontainer{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .style{
      perspective: 600;
      width:100%;
      position: relative;
      transition: all .3s ease;
      transform: translateZ(1px);
      input{
        height:45px;
        width:100%;
        margin-top: 20px;
        padding-left:15px;
        flex-direction: column;
        border: none;
        outline: none;
        font-size: 21px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        background-color:rgba(255,255,255,0.7);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box; 
        box-sizing: border-box;   
        
        &:valid + label,
        &:focus + label{
         transform: rotateX(54deg) translateX(-18px) translateY(-58px);
          opacity:.2;
          text-shadow: 3px 3px 3px #333;
          color:#eaeaea;
        }
      }

      label{
        position:absolute;
        pointer-events: none;
        opacity:.4;
        top:30px;
        left:15px;
        transition: all .5s ease-out;
        transform-origin: 50% 50%;
        transform-style: preserve-3d;
      }
    }
  }
  
  .loaderContainer{
    display: flex;
    align-self: flex-end;
    margin: 20px;
    margin-left: auto;
    flex-direction: row;
    transition: all .3s ease;
    transform: translateZ(1px);
  }
  .btn{
    width:120px;
    height: 35px;
    margin: 20px;
    background: $buttonclr;
    text-align: center;
    line-height:35px;
    color: white;
    cursor: pointer;
  }
}

.welcome{
  display: none;
  line-height: 15px;
  h2{
    font-size: 36px;
    opacity: .8;
    color:#333;
  }
  p{
    color: #eaeaea;
    opacity: .5;
  }
}

.name{
  position: absolute;
  font-size:10px;
  color: #333;
  opacity: .7;
  bottom: -3px;
  left:10px;
  transform: translateZ(1px);
}

@keyframes puff{
  from{
    transform: scale(.1);
  }
  to{
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes scaleUpDown{
  0%, 100%{
    transform: scale(2);
    opacity:0;
  }
  70%{
    transform: scale(2.5); 
    opacity:1;
  }
}
View Compiled
//Heads up this uses display flex which is not supported in older browsers.

$(window).load(function() {
  var container = $('.container');
  var button = $('.btn');
  var loader = $('.loader');
  var welcome = $('.welcome');
  var inputcontainer = $('.inputcontainer');
  container.addClass('fadeIn');

  button.on('click', function() {
    clearTimeout(timeout);
    container.addClass('validate');
    container.addClass('confirm');
    loader.delay(500).fadeIn();
    var timeout = 0;
    timeout = setTimeout(function(){
    container.removeClass('validate');
    welcome.delay(2000).fadeIn();
    loader.fadeOut();
    inputcontainer.delay(900).fadeOut();
    }, 2000);
    setTimeout(function(){
      container.removeClass('fadeIn');
      }, 6000);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js