CSS Transition working for some elements but not others - html

Question

First off I would like to stay that I am new to HTML and CSS, so pardon me if the answer is obvious. I am completely confused as to what is going on right now with my CSS code. I designed a login page with an label text moving up a bit and changing color when the user clicks on the input element. Everything worked perfectly as intended. Now I am making a signup form using the same animations as the login page for consistency. However, for some strange reason, although I am using the same code (with the only difference being position type [login used absolute and signup uses relative], and more input elements), the movement transition doesn't work at all. The text still changes color, and the label element moves up immediately without the transition animation. Any ideas as to why this is occurring would be greatly appreciated.
If it helps, I took the idea from a youtube video: https://www.youtube.com/watch?v=eeHqZeJ9Vqc
All the input elements are following this layout:
.center-card {
margin: 3vh auto 0 auto;
width: 30%;
min-width: 30%;
height: 85vh;
background: white;
border-radius: 10px;
}
.form-wrap {
margin: 0 auto;
width: 90%;
min-width: 90%;
}
.form-wrap form {
width: 100%;
}
.form-wrap label {
font-size: 16px;
}
.signup-inputs {
border-bottom: 2px solid #adadad;
}
.signup-inputs input,
.signup-inputs select {
width: 100%;
padding: 0 5px;
font-size: 16px;
border: none;
background: none;
outline: none;
position: relative;
top: 2.3vh;
}
.signup-inputs label {
position: relative;
bottom: 1vh;
left: 0.5vh;
color: #adadad;
pointer-events: none;
/*transform: translateY(-50%);*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.inline-spacing {
width: 45%;
}
/* Container wrap for (decision maker and number of employees) and (email and phone number)*/
.decisionMaker-Employees,
.email-phone {
display: flex;
justify-content: space-between;
}
.password-margin {
margin-bottom: 3vh;
}
.signup-inputs span::before {
content: '';
width: 0%;
height: 0.3vh;
background: #2691d9;
position: relative;
top: 3.8vh;
display: flex;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}
.signup-inputs input:focus~label,
.signup-inputs input:valid~label,
.signup-inputs select:focus~label,
.signup-inputs select:valid~label {
top: -4vh;
color: #2691d9;
}
.signup-inputs input:focus~span::before,
.signup-inputs input:valid~span::before,
.signup-inputs select:focus~span::before,
.signup-inputs select:valid~span::before {
width: 100%;
}
<div class="center-card">
<h1>Create an Account</h1>
<div class="form-wrap">
<form method="post">
<!-- Signup Name -->
<div class="signup-inputs">
<input type="text" id="name" name="name" required>
<span></span>
<label for="name">Name</label>
</div>

Answer 1

Your signup is probably not working due to the fact that you are using position: relative;
This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be. I’m sure you can imagine, the ability to shift an element around based on its regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn’t work with statically positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element.
The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.
Therefore, maybe try using the same position: absolute; on your signup as you did on your login.