当我 focus/unfocus on.username 时密码输入抖动

Question

当我focus/unfocus输入密码时，不会发生抖动，但是当我focus/unfocus输入用户名时，密码shakes...

为什么会发生这种情况以及如何阻止这种情况？

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

/*.content {
  margin-top: 10%;
  margin-left: 41%;
}*/

.password {
  margin-top: 5%;
}

form {
  position: relative;
}

input {
  position: absolute;
  font-family: 'Montserrat', sans-serif; 
  font-size: 15px;
  background: transparent;
  border: 0; /* BORDER yes/no */
  border-bottom: 2px solid beige; 
  background: transparent;
  outline: 0;
  height: 25px;
  width: 180px;
  z-index: 1;
  margin-top: 5px;
} 

/*input:focus {
  outline: 1;
}*/

label::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 180px;
  height: 25px;
  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: -1px;
}

span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em 0;
  padding-left: -5px;
  transition: top .5s ease, font-size .5s ease; 
 /* transition: transform 1s 2s;*/
  top: 0;
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
  padding-bottom: 15px; 
}

/* 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 name="name" class="user-input" id="user" required>
      <label class="user-label" for="user"><span>Username</span></label>
    </div>
    <div class="password">
      <input name="name" class="pass-input" id="pass" required>
      <label class="pass-label" for="pass"><span>Password</span></label>
    </div>  
  </div>
</form>

Answer 1

我认为发生的事情是您的 CSS 在 <div class="username"> 的底部增加了一个小的边距，这导致了您的 "shaking"。当您点击密码时它没有发生的原因是因为它下面没有任何东西。

Answer 2

为两个 div 容器添加高度，以便在单击时它们保持不变。

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


/*.content {
  margin-top: 10%;
  margin-left: 41%;
}*/

.password {
  margin-top: 5%;
}

form {
  position: relative;
}

input {
  position: absolute;
  font-family: 'Montserrat', sans-serif; 
  font-size: 15px;
  background: transparent;
  border: 0; /* BORDER yes/no */
  border-bottom: 2px solid beige; 
  background: transparent;
  outline: 0;
  height: 25px;
  width: 180px;
  z-index: 1;
  margin-top: 5px;
} 

/*input:focus {
  outline: 1;
}*/

label::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 180px;
  height: 25px;
  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: -1px;
}

span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em 0;
  padding-left: -5px;
  transition: top .5s ease, font-size .5s ease; 
 /* transition: transform 1s 2s;*/
  top: 0;
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
  padding-bottom: 15px; 
}

/* 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 name="name" class="user-input" id="user" required>
      <label class="user-label" for="user"><span>Username</span></label>
    </div>
    <div class="password" >
      <input name="name" class="pass-input" id="pass" required>
      <label class="pass-label" for="pass"><span>Password</span></label>
    </div>  
  </div>
</form>

当我 focus/unfocus on.username 时密码输入抖动

password input shakes when I focus/unfocus on.username

html

css

webpage