login animate design

index.html

<div class="login_wrapper">

<div class="inner_wrapper">
<div class="form_title">
    <h1> Sign in </h1>
<h3> to continue your Account </h3>
</div>
<form action="index.html" method="POST">
    <div id="input" class="usr">
        <input type="text">
        <span> Username </span>
    </div>
   <div id="input" class="email">
        <input type="email">
        <span> Email </span>
   </div>
    <div id="input" class="pass">
        <input type="password">
        <span> Password </span>
        </div>
    <div class="log">
        <input type="submit" value="Login">
        </div>

</form>


</div>













<div class="inner_wrapper2"> 

    <span> </span> 
    <span> </span> 

    <span> </span> 

    <span> </span> 
    <div class="login_lo">
        <h1 data-text="Loading.."> Loading.. </h1>

</div>


</div>

login-animate-design.markdown

login animate design

A Pen by Nikhil Roy on CodePen.

License.

style.css

*{
    box-sizing: border-box;
    font-family: sans;
}
body{
    margin: 0px auto;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  min-width: 600px;
  
}
.login_wrapper{
    width: 350px;
    height: 450px;
    border: 1px solid rgba(0,0,0,0.2);
    padding: 30px;
    border-radius: 10px;
    position: relative;
}
.form_title{
    text-align: center;
}
.form_title h1,
.form_title h3{
    margin: 0px;
    padding: 5px;
}
form #input{
    width: 100%;
    margin: 0px auto;
    text-align: center;
    position: relative;
}
form #input:first-child{
    margin-top: 30px;
}
form #input input{
    padding: 15px 12px;
    width: 100%;
    border: 1px solid rgba(0,0,0,0.2);
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 5px;
    transition: .5s border;
}
form #input input:focus{
    border: 2px solid #287AE6;
    outline: none;
}
.log{
    text-align: right;
}
.log input{
    width: 100px;
    padding: 12px;
    background: #287AE6;
    color: white; 
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 30px;
}
/*.................Name....*/
#input span{
    display: inline-block;
    position: absolute;
    font-size: 20px;
    pointer-events: none;
    user-select: none;
}
.usr span{
    top: 10px;
    left: 15px;
    transition: .2s;
}
input[type='text']:focus ~ span{
    top:  -15px;
    font-size: 13px!important;
    background: white;
    padding: 5px;
    left: 12px;
}
.email span{
    top: 10px;
    left: 15px;
    transition: .2s;
}
input[type="email"]:focus ~  span{
    font-size: 13px!important;
    padding: 10px;
    background: white;
    top: -18px;
    left: 10px;
}
.pass span{
    top: 10px;
    left: 15px;
    transition: .2s;
}
input[type="password"]:focus ~ span{
    font-size: 13px!important;
    top: -16px;
    padding: 10px;
    background: white;
    left: 8px;
}
.inner_wrapper2{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    flex-flow: row wrap;
    perspective: 1000px;
    pointer-events: none;
    user-select: none;
}
.inner_wrapper2 span{
    display: inline-block;
    width: 50%;
    height: 50%;
    background: url('https://i.imgur.com/STexSnk.png') no-repeat;
}
.inner_wrapper2 span:nth-of-type(1){
    background-position: 0% 0%;
    border-top-left-radius: 10px;
    animation: span1 1s linear forwards ;
    transform-origin: left;
      animation-delay: 9s;

}
@keyframes span1{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(-110deg);
    }
}
.inner_wrapper2 span:nth-of-type(2){
    background-position: 100% 0;
    border-top-right-radius: 10px;
    animation: 1s linear forwards span2;
    transform-origin: right;
      animation-delay: 9.3s;

}
@keyframes span2{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(110deg);
    }
}
.inner_wrapper2 span:nth-of-type(3){
    background-position: 0 100%;
    border-bottom-left-radius: 10px;
    animation: span3 1s linear forwards;
    transform-origin: left;
      animation-delay: 9.6s;

}
@keyframes span3{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(-110deg);
    }
}
.inner_wrapper2 span:nth-of-type(4){
    background-position: 100% 100%;
    border-bottom-right-radius: 10px;
    animation: span4 1s linear  forwards; 
    transform-origin: right;
      animation-delay: 9.9s;

}
@keyframes span4{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(110deg);
    }
}
.login_lo{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login_lo h1{
    color: aqua;
    background: black;
    padding: 12px 20px;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    animation: 1s linear stopopacity forwards;
    animation-delay: 8s;
   overflow: hidden;
}
@keyframes stopopacity{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
.login_lo h1::after{
    content: attr(data-text);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 12px 0px 12px 20px;
    background: cyan;
    color: black;
    border-radius: 5px 20px 20px 5px;
    animation: 8s linear h1_animate forwards ;
    overflow: hidden;
}
@keyframes h1_animate{
    0%{
        width: 0px;
    }
    100%{
        width: 100%;
    }
}