jQuery Contact Form Títulos Efecto Mover

Estoy trabajando para crear un formulario de contacto con nosotros a continuación.
Demostración: https://www.teamwork.com/signup Quiero hacer es, Cuando escribo texto en el cuadro de texto, el Título del cuadro de texto se mueve hacia arriba. Cómo puedo hacerlo. He escrito un código en Fiddle. ¿Me puedes ayudar a conseguir este trabajo? Fiddle: https://jsfiddle.net/3s9ehc0c/

HTML

 

CSS

 .border-style { border-width: 0 0 1px 0; position: relative; z-index: 2; border-radius: 0; height: 40px; font-size: 17px; border-color: #e6e6e6; padding-left: 45px; background-color: transparent!important; background-position: left center; background-repeat: no-repeat; background-size: 40px 40px; font-family: inherit; -webkit-box-shadow: none; box-shadow: none; } .border-style:focus { box-shadow: none; } .form-group2 input:focus+i { color: blue; } .form-group1, .form-group2 { display: flex; align-items: center; } .form-group1 i, .form-group2 i { order: 1; padding-right: 0.5em; } .form-group input:focus+i { color: blue; } 

El elemento debe colocarse después del elemento para la input:focus+i selector input:focus+i para elemento en HTML.

Puede usar CSS :before pseudo element, attr() para hacer referencia al atributo data-* en HTML, animation y transition para el efecto.

 .border-style { border-width: 0 0 1px 0; position: relative; z-index: 2; border-radius: 0; height: 40px; font-size: 17px; border-color: #e6e6e6; padding-left: 45px; background-color: transparent!important; background-position: left center; background-repeat: no-repeat; background-size: 40px 40px; font-family: inherit; -webkit-box-shadow: none; box-shadow: none; } .border-style:focus { box-shadow: none; } .form-group2 input:focus+i { color: blue; } .form-group1, .form-group2 { display: flex; align-items: center; } .form-group1 i, .form-group2 i { order: 1; padding-right: 0.5em; } .form-group input:focus+i { color: blue; } .form-group input:focus+i { color: blue; } .form-group input:focus+i:before { content: attr(data-placeholder); /* set content */ position: relative; font-size: 17px; left: -214px; top: 0px; transition: all 1s ease; /* set transition */ animation: placeholder 1s forwards ease; /* set animation */ } /* do animation stuff at i element */ @keyframes placeholder { to { top: -12px; font-size: 12px; text-align: center; left: -204px; } }