CSS Form下划线文本字段动画效果

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

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?

Answer 2

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>