CSS Form underline text field animation effect - html

Question

I have the following code (below) of my form section and in it i want this (below image) underline animation to be done in the text input field . Whenever the user focus on the field the animation to be done.
the animation is to be smooth ease.
But something is missing i can't find in it. What is wrong and How to fix it?
Anyone Please help
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
html, body {
height: 100%;
}
#contact {
font-family: "Montserrat", sans-serif;
font-size: 14px;
font-weight: 300;
letter-spacing: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 10% 0;
}
#contact main, body footer {
width: 100%;
}
#contact main {
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.form .text-input, .form .textarea, .form .label, .form .button {
padding: 1em 1.5em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
line-height: normal;
border: 1px solid transparent;
border-radius: 0;
}
.form .text-input, .form .textarea {
font: inherit;
line-height: normal;
width: 100%;
box-sizing: border-box;
display: block;
padding-left: 0;
border-bottom-color: #00d2ff;
background: transparent;
outline: none;
color: black;
}
.form .text-input:placeholder, .form .textarea:placeholder {
color: rgba(0, 0, 0, 0.7);
}
.form .text-input:-webkit-autofill, .form .textarea:-webkit-autofill {
box-shadow: 0 0 0px 1000px white inset;
border-top-color: white;
border-left-color: white;
border-right-color: white;
}
.form .error.text-input, .form .error.textarea, .error .form .text-input, .form .error .text-input, .error .form .textarea, .form .error .textarea {
border-color: transparent transparent red transparent;
}
.form:not(.has-floated-label) .text-input:active, .form:not(.has-floated-label) .textarea:active, .form:not(.has-floated-label) .text-input:focus, .form:not(.has-floated-label) .textarea:focus {
border-color: transparent transparent black transparent;
}
.form .label {
position: absolute;
z-index: 10;
pointer-events: none;
padding-left: 0;
}
.form .label {
top: 0;
left: 0;
color: rgba(0, 0, 0, 0.3);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.active .form .label, .form .active .label {
font-size: 0.80em;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
padding: 0;
color: rgba(0, 0, 0, 0.7);
background: white;
}
.focus .form .label, .form .focus .label {
color: black;
}
.form.has-floated-label .field:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 3px solid #00d2ff;
-webkit-transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.form.has-floated-label .field.focus:after {
width: 100%;
}
.form .button {
font: inherit;
line-height: normal;
cursor: pointer;
background-color: #00d2ff;
color: white;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.14286em;
transition-duration: 0.4s;
}
.form .button:hover, .form .button:focus, .form .button:active {
box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
}
.form .button:active {
position: relative;
top: 1px;
left: 1px;
}
.form {
/* max-width: 50em; */
width: 100%;
margin: 0 10%;
/* padding: 1em 2em; */
box-sizing: border-box;
overflow: hidden;
}
.form .field {
position: relative;
width: 100%;
margin-bottom: 1.5em;
float: left;
}
#media screen and (min-width: 40em) {
.form .field.half {
width: calc(50% - 2em);
margin-right: 2em;
}
.form .field.half + .half {
margin-left: 2em;
margin-right: 0;
}
}
.form .field:last-child {
float: right;
width: auto;
}
.form .textarea {
max-width: 100%;
}
<section id="contact">
<main>
<form action='' class='form'>
<p class='field required half'>
<label class='label required' for='name'>Name</label>
<input class='text-input' id='name' name='name' required type='text'>
</p>
<p class='field required half'>
<label class='label' for='email'>E-mail</label>
<input class='text-input' id='email' name='email' required type='email'>
</p>
<p class='field'>
<label class='label' for='message'>Message</label>
<textarea class='textarea' cols='50' id='message' name='message' required rows='4'></textarea>
</p>
<p class='field'>
<input class='button' type='submit' value='Send message'>
</p>
</form>
</main>
</section>

Answer 1

This is an example:
.input-name{
position: relative;
display: inline-block;
overflow: hidden;
}
.input-name > input[type=text]{
border: none;
border-bottom: 2px solid red;
outline: none;
}
.underline-animation{
transition: all 0.5s;
display: inline-block;
bottom: 0;
left: -100%;
position: absolute;
width: 100%;
height: 2px;
background-color: #64e4fe;
}
.input-name > input[type=text]:focus + .underline-animation{
left: 0;
}
<div class="input-name">
<input type="text" placeholder="name">
<span class="underline-animation"></span>
</div>

Answer 2

I don't think this is possible with only the underline element since I know of no way to animate it like that, you can use the <hr> element though.
then you can do
hr{
position:relative;
left:0;
width:0%;
height:2px;
background-color:#1784E1;
border:none;
margin-top:0;
margin-left:0;
margin-bottom:20px;
transition:0.5s;
}
input:focus + hr{
width:100%;
}
if you go to sam.apostel.be/TAD, is that what you want?