Input with placeholder animation // pure JS

index.html

<div class="wrapper">
    <fieldset class="formRow">
        <div class="formRow--item">
            <label for="firstname" class="formRow--input-wrapper js-inputWrapper">
                <input type="text" class="formRow--input js-input" id="firstname" placeholder="First name">
            </label>
        </div>
    </fieldset>
</div>

script.js

function isActive() {
    $thisItem.classList ? $thisItem.classList.add(activeClass) : $thisItem.className += " " + activeClass
}

function notActive() {
    $thisItem.classList ? $thisItem.classList.remove(activeClass) : $thisItem.className = $thisItem.className.replace(new RegExp("(^|\\b)" + activeClass.split(" ").join("|") + "(\\b|$)", "gi"), " ")
}

function checkValueLength() {
    $input.value.length ? isActive() : notActive()
}

var $inputWrapper = document.getElementsByClassName("js-inputWrapper");
if ($inputWrapper.length)
    for (var i = 0; i < $inputWrapper.length; i++) {
        var $thisItem = $inputWrapper[i],
            $input = $thisItem.getElementsByClassName("js-input")[0],
            placeholderTxt = $input.getAttribute("placeholder"),
            $placeholder = document.createElement("span");
        
        $placeholder.className = "placeholder",
        $placeholder.innerHTML = placeholderTxt,
        $input.parentNode.insertBefore($placeholder, $input.nextSibling),
        $input.setAttribute("placeholder", "");
        
        var $placeholder = $thisItem.getElementsByClassName("placeholder"),
            activeClass = "active";
        
        checkValueLength(),
        $input.addEventListener("blur", function() { checkValueLength() }),
        $input.addEventListener("focus", function() { isActive() })
    }

style.scss

.formRow {
    position: relative; 
    width: 100%;
    &--item {
        display: flex;
        width: 100%;
        flex: 1 1 auto;
    }
    &--input {
        position: relative;
        padding: 15px 20px 11px;
        width: 100%;
        outline: none;
        border: solid 1px #95989a;
        border-radius: 4px;
        color: #2c3235;
        letter-spacing: .2px;
        font-weight: 400;
        font-size: 16px;
        resize: none;
        transition: all .2s ease;
        &-wrapper {
            position: relative;
            display: block;
            width: 100%;
            &.active {
                .placeholder {
                    top: -5px;
                    background-color: #ffffff;
                    color: #72ba8a;
                    text-transform: uppercase;
                    letter-spacing: .8px;
                    font-size: 11px;
                    line-height: 14px;
                    transform: translateY(0);
                }
                .formRow--input:not(:focus):not(:hover) {
                    & ~ .placeholder {
                        color: #b8dcc4;
                    }
                }
            }
            .formRow--input {
                &:focus,
                &:hover {
                    border-color: #72ba8a;
                }
            }
        }
    }
    .placeholder {
        position: absolute;
        top: 50%;
        left: 10px;
        display: block;
        padding: 0 10px;
        color: #95989a;
        white-space: nowrap;
        letter-spacing: .2px;
        font-weight: normal;
        font-size: 16px;
        transition: all, .2s;
        transform: translateY(-50%);
        pointer-events: none;
        user-select: none;
    }
}