Input label transition

by Jesse M

HTML

<form method="post">
<div class="input-container">
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="this is the placeholder" />
</div>
</form>

CSS

body {
  padding-top:20px;
}

.input-container {
  position:relative;
  width:200px;
  height:30px;
}

label {
  position:absolute;
  padding-left:10px;
  line-height:44px;
}

input {
  width:100%;
  height:100%;
  padding:5px 8px;
  outline:none;
}

input::-webkit-input-placeholder{ 
  opacity:0;
  -webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
input::-moz-input-placeholder{ 
  opacity:0;
}

input:focus::-webkit-input-placeholder{ 
  opacity: 1;
}
input:focus::-moz-input-placeholder{ 
  opacity: 1;
}

JavaScript

$('input').on('focus', function(){
  $(this).parent().find('label').animate({
    'top':'-35px'
  }, 200);
});
$('input').on('blur', function(){
  $(this).parent().find('label').animate({
    'top':'0'
  }, 200);
});