<div class="password">
    <input id="password1" type="password" required>
    <label for="password1">Password</label>
    <svg class="unlock" viewBox="0 0 12 16">
        <path d="M6,2 C6.6,2 7.1,2.2 7.5,2.7 L8.2,3.4 L9.7,2.1 L9,1.3 C8.2,0.5 7.1,0 6,0 C3.8,0 2,1.8 2,4 L2,5.5 C0.8,6.6 0,8.2 0,10 C0,13.3 2.7,16 6,16 C9.3,16 12,13.3 12,10 C12,6.7 9.3,4 6,4 C5.3,4 4.6,4.1 4,4.4 L4,4 C4,2.9 4.9,2 6,2 Z M6,7 C7.1,7 8,7.9 8,9 C8,9.7 7.6,10.4 7,10.7 L7,13 L5,13 L5,10.7 C4.4,10.4 4,9.7 4,9 C4,7.9 4.9,7 6,7 Z"></path>
    </svg>
    <svg class="error" viewBox="0 0 16 14">
        <path d="M15.216,12.529 L8.882,0.654 C8.506,-0.052 7.494,-0.052 7.117,0.654 L0.784,12.529 C0.429,13.195 0.912,14 1.667,14 L14.334,14 C15.088,14 15.571,13.195 15.216,12.529 Z M8,12 C7.448,12 7,11.552 7,11 C7,10.448 7.448,10 8,10 C8.552,10 9,10.448 9,11 C9,11.552 8.552,12 8,12 Z M9,9 L7,9 L7,5 L9,5 L9,9 Z"></path>
    </svg>
</div>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5180423-Password-error-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-1col-dnld-e29e0436f93d2f9c430fde5f3da66f94493fdca66351408ab0f96e2ec518ab17.png" alt=""></a>

$background: #EDF0F9;

.password {
    width: 222px;
    background: #fff;
    position: relative;
    padding: 16px 0 5px 0;
    border-radius: 6px;
    input {
        width: 100%;
        border: 0;
        outline: none;
        line-height: 20px;
        font-size: 16px;
        padding: 9px 40px 0 16px;
        font-family: inherit;
        background: none;
        color: #151924;
        &:valid,
        &:focus {
            & + label {
                transform: translate(0, -4px) scale(.72);
                & + .unlock {
                    opacity: 1;
                }
            }
        }
    }
    label {
        position: absolute;
        z-index: 1;
        left: 16px;
        top: 50%;
        line-height: 24px;
        font-size: 16px;
        margin: -12px 0 0 0;
        cursor: text;
        transform-origin: top left;
        transition: all .3s ease;
    }
    .unlock {
        position: absolute;
        z-index: 2;
        stroke: none;
        fill: #3F4656;
        display: block;
        width: 12px;
        height: 16px;
        right: 16px;
        top: 50%;
        opacity: .2;
        cursor: pointer;
        transform: translate(0, -50%);
        transition: opacity .4s ease;
    }
    .error {
        position: absolute;
        right: 0;
        bottom: 4px;
        display: block;
        width: 16px;
        height: 14px;
        opacity: 0;
        stroke: none;
        z-index: 5;
        fill: #EB3E60;
        transform: scale(.4);
        transition: all .3s ease;
    }
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        border-style: solid;
        border-width: 0 0 0 0;
        z-index: 4;
        border-color: #fff $background;
        transition: all .3s ease .35s;
    }
    &.false {
        animation: shake .6s cubic-bezier(.36, .07, .19, .97) both;
        &:before {
            border-width: 38px 32px 0 0;
            border-color: #C9D5EA $background;
            border-radius: 6px 0 0 0;
            transition-delay: 0s;
        }
        .error {
            opacity: 1;
            transform: scale(1);
            transition: transform .4s cubic-bezier(.87,-.41,.19,1.44) .35s, opacity .3s ease .45s;
        }
    }
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

body {
    background: $background;
}

// Center & dribbble
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        opacity: .5;
        transition: all .4s ease;
        &:hover {
            opacity: 1;
        }
        img {
            display: block;
            height: 36px;
        }
    }
}

$(document).ready(function() {

    $('.password .unlock').click(function(e) {
        var passwordDiv = $(this).parent();
        if(passwordDiv.children('input').val()) {
            passwordDiv.addClass('false');
            setTimeout(function() {
                passwordDiv.removeClass('false');
            }, 2500);
        }
    })

});