.input-field {
 position:relative;
 display:block;
 width:60%;
 border:none;
 border-radius:0;
 background:#647984;
 color:#fff;
 -webkit-appearance:none
}
.input-field:focus {
 outline:0
}
.input-label {
 display:inline-block;
 width:40%;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.input-anim {
 overflow:hidden
}
.input-field-anim {
 width:100%;
 background:0 0;
 color:#fff
}
.input-label-anim {
    position: absolute;
    color: #fff;
    bottom: -1px;
    left: 1px;
    width: 100%;
    height: calc(100% - 1em);
    text-align: left;
    pointer-events: none
}
.input-label-anim::after,
.input-label-anim::before {
 content:'';
 position:absolute;
 top:0;
 left:-1px;
 width:100%;
 height:100%;
 border-bottom:4px solid #fff
}
.input-label-anim::after {
 margin-top:2px;
 border-bottom:10px solid #fff;
 -webkit-transform:translate3d(-100%,0,0);
 transform:translate3d(-100%,0,0);
 -webkit-transition:-webkit-transform .3s;
 transition:transform .3s
}
.input-label-anim-color::after {
 border-color:#000
}
.input-field-anim:focus+.input-label-anim::after {
 -webkit-transform:translate3d(0,0,0);
 transform:translate3d(0,0,0)
}
.input-field-anim:focus+.input-label-anim .input-label-content-anim {
 -webkit-animation:anim-1 .3s forwards;
 animation:anim-1 .3s forwards
}
@-webkit-keyframes anim-1 {
 50% {
  opacity:0;
  -webkit-transform:translate3d(1em,0,0);
  transform:translate3d(1em,0,0)
 }
 51% {
  opacity:0;
  -webkit-transform:translate3d(-1em,-40%,0);
  transform:translate3d(-1em,-40%,0)
 }
 100% {
  opacity:1;
  -webkit-transform:translate3d(0,-40%,0);
  transform:translate3d(0,-40%,0)
 }
}
@keyframes anim-1 {
 50% {
  opacity:0;
  -webkit-transform:translate3d(1em,0,0);
  transform:translate3d(1em,0,0)
 }
 51% {
  opacity:0;
  -webkit-transform:translate3d(-1em,-40%,0);
  transform:translate3d(-1em,-40%,0)
 }
 100% {
  opacity:1;
  -webkit-transform:translate3d(0,-40%,0);
  transform:translate3d(0,-40%,0)
 }
}