• HTML
• CSS
• JS

HTML

<div class="inputBox">
    <input type="text" required>
    <label>Wavy Input Text Animation</label>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,900&display=swap');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#29313a;
}
.inputBox
{
    position:relative;
    width:350px;
}
.inputBox input
{
    position:relative;
    width:100%;
    padding:10px 0;
    background:transparent;
    border:none;
    outline:none;
    border-bottom:2px solid #999;
    color:#fff;
    font-size:1.25em;
    transition:0.5s;
}
.inputBox label
{
    position:absolute;
    left:0;
    padding:10px 0;
    pointer-events:none;
    color:#666;
    user-select:none;
}
.inputBox label span
{
    position:relative;
    display:inline-flex;
    flex-direction:row;
    font-size:1.25em;
    letter-spacing:0.05em;
    transition:0.25s cubic-bezier(0.5,1,0.5,1.5);
}
.inputBox input:focus ~ label span,
.inputBox input:valid ~ label span
{
    color:#0f0;
    text-shadow:0 0 5px #0f0,
    0 0 15px #f0f,
    0 0 30px #0f0;
    transform:translateY(-30px);

}
.inputBox input:focus,
.inputBox input:valid
{
    border-bottom:2px solid #fff;
}

JS

let label = document.querySelector('label');
label.innerHTML = label.innerText.split('').map((letters,i) => `<span style="transition-delay:${i*30}ms;filter:hue-rotate(${i*10}deg);">${letters}</span>`).join('');