Monkey Eye Open Close Animation Login page with password Show Hide in Javascript.

                                                
                                                
                                                <!-- fontawesome add it in header -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="maincontainer_outer">
        <div class="ath_monkey_login">
            <div class="ath_monkey_img_outer" id="ath_monkey_img_outer">
                <img id="hands" src="hands.png" />
            </div>
            <div class="form_outer">
                <form action="" method="post">
                    <input type="email" id="mail" name="" onfocus="openeye();" class="ath_login" placeholder="Email"
                        autocomplete="off" />
                    <br />
                    <br />
                    <div class="password_inpt_outer">
                        <input type="password" id="pwdbar" onfocus="closeye();" name="pwd" class="ath_login"
                            placeholder="Password" />

                        <div class="pass_show">
                            <span class="input-group-text" onmousedown="password_show_hide();"
                                onmouseup="password_show_hide();">
                                <i class="fas fa-eye" id="show_eye"></i>
                                <i class="fas fa-eye-slash d-none" id="hide_eye"></i>
                            </span>
                        </div>
                    </div>
                    <br />
                    <br />
                    <input type="submit" name="" class="sbutton ath_login" value="L O G I N" />
                </form>
            </div>
            <footer class="footer"><a style="color: #4f76f5; text-decoration: none;" href="#">Create New Account</a>
            </footer>
        </div>
        <img src="monkey_login.webp" alt="">
    </div>
                                                
                                            

                                                
                                                
                                                * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {
            background: url('playstation-pattern.webp');
            /* background: url('email-pattern.webp'); */
            /* background-size: cover; */
            font-family: Arial, Helvetica, sans-serif;
        }

        .maincontainer_outer {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
        }

        .ath_monkey_login {
            width: 350px;
            height: auto;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
            display: flex;
            align-items: center;
            flex-direction: column;
            background-color: rgb(255 255 255 / 95%);
            border-radius: 40px;
            padding-bottom: 20px;
        }

        .ath_monkey_img_outer {
            background-color: white;

            overflow: hidden;
            /*overflow hidden because to keep the hand image hidden below*/
            margin-top: 20px;
            height: 170px;
            width: 170px;
            border-radius: 50%;
            background-image: url(monkey.gif);
            background-size: 90% 85%;
            background-repeat: no-repeat;
            background-position: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .2);

            /*flex center to keep the hand image in the center*/
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .ath_monkey_img_outer img {
            margin-top: 110%;
            height: 170px;
            width: 170px;
            transition: 1s;
        }

        .form_outer {
            margin-top: 38px;
        }

        .ath_login {
            height: 40px;
            width: 300px;
            /*background-color: #254E58;*/
            border-radius: 20px;
            border: none;
            color: #5a5449;
            text-indent: 15px;
            font-size: 100%;
            box-shadow: 0 0px 15px rgba(0, 0, 0, .2);
            outline: none;
        }

        .ath_login::placeholder {
            color: lightgrey;
            font-size: 100%;
            font-weight: lighter;
            text-indent: 15px;
        }

        .sbutton {
            text-indent: 0px;
            height: 40px;
            width: 300px;
            margin-top: 10px;
            background-color: #1b8c1b66;
            transition: "2s";
            border: none;
            color: white;
            font-weight: bolder;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
            outline: none;

        }

        .sbutton:hover {
            color: #5a5449;
            cursor: pointer;
        }

        .footer {
            color: #5a5449;
            font-weight: lighter;
            margin-top: 40px;
        }

        .pass_show {
            /* width: 100%; */
            /* display: block; */
            margin-top: 10px;
            /* display: flex; */
            align-items: center;
            display: inline-block;
            position: absolute;
            right: 10px;
            top: 2px;
        }

        .pass_show input {
            width: 18px;
            height: 18px;
        }

        .pass_show label {
            font-size: 18px;
            padding-left: 10px;
        }

        .d-none {
            display: none;
        }

        .password_inpt_outer {
            position: relative;
        }
                                                
                                            

                                                
                                                
                                                var x = document.getElementById("hands");
        var y = document.getElementById("ath_monkey_img_outer");
        function closeye() {
            y.style.backgroundImage = "url(monkey_pwd.gif)";
            x.style.marginTop = "0%";
        }
        function openeye() {
            y.style.backgroundImage = "url(monkey.gif)";
            x.style.marginTop = "110%";
        }

        function password_show_hide() {
            var pass = document.getElementById("pwdbar");
            var show_eye = document.getElementById("show_eye");
            var hide_eye = document.getElementById("hide_eye");
            hide_eye.classList.remove("d-none");
            if (pass.type === "password") {
                openeye();
                pass.type = "text";
                show_eye.style.display = "none";
                hide_eye.style.display = "block";
            } else {
                closeye();
                pass.type = "password";
                show_eye.style.display = "block";
                hide_eye.style.display = "none";

            }
        }