Float Label in Form

//Html
<form action="">
     <div class="form-group single-input">
         <input type="text" class="form-control float-label" required>
         <span class="highlight"></span>
        <label for="" class="">Your Name</label>
    </div>
 </form>

//CSS
//Style for the float label
input {
	position:relative;
}
label {
    color: #e1e1e1;
    font-size: 0.722em;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    @extend .transition;
}

.float-label:focus ~ label, .float-label:valid ~ label {
    top: -20px;
    font-size: 0.722em;
    color: #fff;

}

/* active state */
.float-label:focus ~ .bar:before, .float-label:focus ~ .bar:after {
  width:50%;
}

.float-label:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

// End style for float label