Border transtion on input like in MaterialUI

Question

does anyone know how to achieve border transition on input like in MaterialUI?

http://material-ui.com/#/components/inputs

I've done only a bottom border by now but have no idea how to make this bottom-border slide like that. Unfortunately, haven't found anything satysfiyng via google.

Answer 1

I've used the pseudo effect :after to achieve a pure css solution for a similar functionality, although only really works with 'hovering' the element:

input {
  outline: 0;
  border: none;
  width: 200px;
  border-bottom:1px solid gray; 
}
div {
  position: relative;
  width: 200px;
  height: 20px;
}
div:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 2px;
  background: blue;
  transition: all 0.5s;
  bottom: 0;
  left: 50%;
}
div:hover:after {
  width: 100%;
  height: 2px;
  left: 0;
}
input:focus{
border-bottom:2px solid red;  
}

<div>
  <input type="text" placeholder="type here" />
</div>