Why is there some exceeding scale at the bottom when unfocusing? - html

Question

Below code, the transition is 3 milliseconds and the issue is not really noticeable.
body {
background-color: Royalblue; /*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
.username {
height:40px;
}
.password {
height:40px;
margin-top: 30%;
}
form {
position: relative; /* Parent relative */
margin-top: 10%;
margin-left: 41%;
/*border: 1.5px solid black;*/
width: 15%;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0; /* BORDER yes/no */
border-bottom: 2px solid black;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
margin-top: 5px;
}
label::after {
content: '';
position: absolute;
top: 1px;
left: 0;
width: 180px;
height: 23px;
border-radius: 2px;
transition: transform .3s;
}
label::after{
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 2px;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: -3px;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em ;
padding-left: 0px;
transition: top .5s ease, font-size .5s ease;
top: 0;
}
input:focus + label > span,
input:valid + label > span {
top: -23px;
font-size: 11px;
padding-bottom: 15px;
}
/*input:focus {
outline: 1;
}*/
/*.content {
margin-top: 10%;
margin-left: 41%;
}*/
/* font-family: monospace;*/
/*transform: translate3d(0, -80%, 0); */
/* transition-timing-function: linear;*/
<p class="head">Sign In</p>
<form>
<div class="content">
<div class="username">
<input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
<label class="user-label" for="user"><span>Username</span></label>
</div>
<!-- <div class="password">
<input type="text" name="name" class="pass-input" id="pass" required />
<label class="pass-label" for="pass"><span>Password</span></label>
</div> -->
</div>
</form>
But changing transform time from label:after { transition: transform .3s;} to 2 seconds then it scales like this.
Why is there some exceeding scale at the bottom when unfocusing? I tried to tweak the top property in input:focus + label::after & label::afterin attempt of fixing it but nothing's working.

Answer 1

Try this and let me know if this solves your issue
body {
background-color: Royalblue; /*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
.username {
height:40px;
}
.password {
height:40px;
margin-top: 30%;
}
form {
position: relative; /* Parent relative */
margin-top: 10%;
margin-left: 41%;
/*border: 1.5px solid black;*/
width: 15%;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0; /* BORDER yes/no */
border-bottom: 2px solid black;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
margin-top: 5px;
}
label::after {
content: '';
position: absolute;
top: 1px;
left: 0;
width: 180px;
height: 23px;
border-radius: 2px;
transition: all 2s linear;
}
label::after {
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 2px;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: -3px;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em ;
padding-left: 0px;
transition: all 2s linear;
font-size: 12px;
top: 0;
}
input:focus + label > span,
input:valid + label > span {
top: -23px;
font-size: 11px;
padding-bottom: 15px;
}
/*input:focus {
outline: 1;
}*/
/*.content {
margin-top: 10%;
margin-left: 41%;
}*/
/* font-family: monospace;*/
/*transform: translate3d(0, -80%, 0); */
/* transition-timing-function: linear;*/
<p class="head">Sign In</p>
<form>
<div class="content">
<div class="username">
<input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
<label class="user-label" for="user"><span>Username</span></label>
</div>
<!-- <div class="password">
<input type="text" name="name" class="pass-input" id="pass" required />
<label class="pass-label" for="pass"><span>Password</span></label>
</div> -->
</div>
</form>

Answer 2

Here is what I changed :
input {
height: 40px;
margin-top: 0;
box-sizing: border-box;
}
Example
body {
background-color: Royalblue;
/*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
.username {
height: 40px;
}
.password {
height: 40px;
margin-top: 30%;
}
form {
position: relative;
margin-top: 10%;
margin-left: 41%;
width: 15%;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0;
/* BORDER yes/no */
border-bottom: 2px solid black;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
//margin-top: 5px;
/* new */
height: 40px;
margin-top: 0;
box-sizing: border-box;
}
label::after {
content: '';
position: absolute;
top: 1px;
left: 0;
width: 180px;
height: 23px;
border-radius: 2px;
transition: transform .3s;
}
label::after {
z-index: -1;
background: beige;
/*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 2px;
}
input:focus+label::after,
input:valid+label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: -3px;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em;
padding-left: 0px;
transition: top .5s ease, font-size .5s ease;
top: 0;
}
input:focus+label>span,
input:valid+label>span {
top: -23px;
font-size: 11px;
padding-bottom: 15px;
}
<p class="head">Sign In</p>
<form>
<div class="content">
<div class="username">
<input type="text" name="name" class="user-input" id="user" required />
<!--input field-->
<label class="user-label" for="user"><span>Username</span></label>
</div>
<!-- <div class="password">
<input type="text" name="name" class="pass-input" id="pass" required />
<label class="pass-label" for="pass"><span>Password</span></label>
</div> -->
</div>
</form>