input field and label animation

by NagarajShet

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group">
    <label class="control-label" for="inputNormal">Normal input</label>
    <input type="text" class="form-control" id="inputNormal" />
</div>

<div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Warning input</label>
    <input type="text" class="form-control" id="inputWarning" />
</div>

CSS

body {
    padding: 20px;
}

/* --- material floating label --- */

.form-group {
    display: flex;
    height: 55px;
}

.control-label {
    left: 25px;
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, 25px, 0) scale(1);
    transform-origin: left top;
    transition: 240ms;
}

.form-group input[type="text"] {
  border: 0px;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0px;
    padding: 0px;
    outline: 0px;
    box-shadow: none;
    font-size: 14px;
    font-family: "ProximaNovaSemibold";
}

.form-group.focused .control-label {
    color: #4d4d4d;
    transform: scale(0.75);
}

.form-control {
    align-self: flex-end;
}

.form-control::-webkit-input-placeholder {
    color: transparent;
    transition: 240ms;
}

.form-control:focus::-webkit-input-placeholder {
    transition: none;
}

.form-group.focused .form-control::-webkit-input-placeholder {
    color: #bbb;
}

JavaScript

$('.form-control').on('focus blur', function (e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');