<!-- Sample Container -->
<div class="container">
  <h2>Input Style</h2>
  <p class="input-container">
    <input type="text" id="input-username" class="login-input">
    <label for="input-username" unselectable="on">Username</label>
  </p>
  <p class="input-container">
    <input type="password" id="input-password" class="login-input">
    <label for="input-password" unselectable="on">Password</label>
  </p>
</div>

//Input Styles
p.input-container {
  width: 100%; 
  position: relative;
  top: 50px;
  margin-bottom: 25px;
}

label {
  color: #CCC;
  position: absolute; 
  cursor: text;
  transform: translateY(-25px);
  transition: transform 0.3s ease;
  left: 0;
  bottom: -15px;
}

input {
  width: 100%;
  height: 40px;
  font-size: 16px;
  transition: 0.6s;
  border: none;
  border-bottom: 1px solid #CCC;
  background-color: transparent;
  &:focus {
    outline: none;
    border-bottom: 1px solid #28a2a2;
  }
}

//Input Animation Styles
.animation label {
  transform: translateY(-55px);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
}

.animation-color label {
  color: #28a2a2;
}

//Base Style
html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Arial';
  background-color: #353535;
  background-image: url(https://unsplash.imgix.net/photo-1413920346627-a4389f0abd61?q=75&fm=jpg&s=cfd43f65c77577abb3bf29c0d6a0775f);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

h2 {
  color: #28a2a2;  
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 500px; 
  min-height: 250px;
  border: 1px solid #CCC; 
  padding: 40px; 
  background-color: #FFF
}

//Load animation if fields containing data on page load
$( document ).ready(function() {
  $(".input-login").each(function() { 
    if ($(this).val() != "") {
      $(this).parent().addClass("animation");
    }
  });
});

//Add animation when input is focused
$(".login-input").focus(function(){
  $(this).parent().addClass("animation animation-color");
});

//Remove animation(s) when input is no longer focused
$(".login-input").focusout(function(){
  if($(this).val() === "")
    $(this).parent().removeClass("animation");
  $(this).parent().removeClass("animation-color");
})