<div class="password">
    <div class="field">
        <input id="password1" type="password" required>
        <label for="password1">Password</label>
    </div>
    <div class="fold">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <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/5310205-Password-error-animation-2" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-1col-dnld-e29e0436f93d2f9c430fde5f3da66f94493fdca66351408ab0f96e2ec518ab17.png" alt=""></a>

.password {
    width: 222px;
    position: relative;
    .field {
        background: #fff;
        padding: 16px 0 5px 0;
        width: 70%;
        border-radius: 6px 0 0 6px;
        position: relative;
        input {
            width: 100%;
            border: 0;
            outline: none;
            line-height: 20px;
            font-size: 16px;
            padding: 9px 0 0 16px;
            font-family: inherit;
            background: none;
            color: #151924;
            &:valid,
            &:focus {
                & + label {
                    font-size: 11px;
                    transform: translate(0, -8px);
                }
            }
        }
        label {
            position: absolute;
            z-index: 1;
            left: 16px;
            top: 50%;
            line-height: 24px;
            font-size: 16px;
            margin: -12px 0 0 0;
            transition: all .3s ease;
        }
    }
    .fold {
        width: 30%;
        position: absolute;
        left: 70%;
        top: 0;
        bottom: 0;
        display: flex;
        transition: width .5s ease .2s;
        span {
            flex-basis: 50%;
            height: 100%;
            display: block;
            position: relative;
            background: #fff;
            transition: border-radius .3s ease .2s, background .6s ease .2s;
            &:last-child {
                border-radius: 0 6px 6px 0;
            }
            &:before,
            &:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: #fff;
                transition: background .6s ease .2s, clip-path .4s ease .2s, -webkit-clip-path .4s ease .2s;
            }
            &:before {
                transform: translateY(-99%);
            }
            &:after {
                transform: translateY(100%);
            }
            &:nth-child(even) {
                &:before {
                    -webkit-clip-path: polygon(0 100%, 0 100%, 100% 100%);
                    clip-path: polygon(0 100%, 0 100%, 100% 100%);
                }
                &:after {
                    -webkit-clip-path: polygon(100% 0, 0 0, 0 0);
                    clip-path: polygon(100% 0, 0 0, 0 0);
                }
            }
            &:nth-child(odd) {
                &:before {
                    -webkit-clip-path: polygon(100% 100%, 0 100%, 100% 100%);
                    clip-path: polygon(100% 100%, 0 100%, 100% 100%);
                }
                &:after {
                    -webkit-clip-path: polygon(100% 0, 0 0, 100% 0);
                    clip-path: polygon(100% 0, 0 0, 100% 0);
                }
            }
        }
    }
    .unlock {
        position: absolute;
        z-index: 2;
        stroke: none;
        fill: #3F4656;
        display: block;
        width: 12px;
        height: 16px;
        right: 16px;
        top: 50%;
        opacity: 1;
        cursor: pointer;
        transform: translate(0, -50%);
        transition: opacity .4s ease .5s;
    }
    .error {
        position: absolute;
        right: 4px;
        top: 50%;
        display: block;
        width: 16px;
        height: 14px;
        opacity: 0;
        margin: -7px 0 0 0;
        stroke: none;
        z-index: 5;
        fill: #EB3E60;
        transform: scale(.4);
        transition: all .3s ease;
    }
    &.false {
        animation: shake .6s cubic-bezier(.36, .07, .19, .97) both;
        .error {
            opacity: 1;
            transform: scale(1);
            transition: transform .5s ease .75s, opacity .4s ease .75s;
        }
        .unlock {
            opacity: 0;
            transition-delay: 0s;
        }
        .fold {
            width: 18.5%;
            transition-delay: .6s;
            span {
                border-radius: 0;
                transition: border-radius .3s ease .4s, background .7s ease .5s;
                &:before,
                &:after {
                    background: inherit;
                    transition: clip-path .4s ease .5s, -webkit-clip-path .4s ease .5s;
                }
                &:nth-child(even) {
                    background: #fff;
                    &:before {
                        -webkit-clip-path: polygon(0 90%, 0 100%, 100% 100%);
                        clip-path: polygon(0 90%, 0 100%, 100% 100%);
                    }
                    &:after {
                        -webkit-clip-path: polygon(100% 0, 0 0, 0 10%);
                        clip-path: polygon(100% 0, 0 0, 0 10%);
                    }
                }
                &:nth-child(odd) {
                    background: #DAE1F0;
                    &:before {
                        -webkit-clip-path: polygon(100% 90%, 0 100%, 100% 100%);
                        clip-path: polygon(100% 90%, 0 100%, 100% 100%);
                    }
                    &:after {
                        -webkit-clip-path: polygon(100% 0, 0 0, 100% 10%);
                        clip-path: polygon(100% 0, 0 0, 100% 10%);
                    }
                }
            }
        }
    }
}

@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);
    }
}

body {
    background: #EDF0F9;
}

// 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;
        }
    }
}

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