morphing search input

morphing search input http://codepen.io/pixelass/pen/PqMpYL

by Yury

HTML

<!-- http://codepen.io/pixelass/pen/PqMpYL -->
<!-- Jade 
form.inputbox
  input(type=text required)
  button.del(type="reset")
-->
<body>
<form class="inputbox">
  <input required="required">
  <button type="reset" class="del"></button>
</form>
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300);
body {
  background: #5a279c;
  color: #fff;
}

.inputbox {
  height: 50px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.inputbox input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 16px;
  padding: 16.5px 0;
  border: 0;
  background: none;
  width: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 100%;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
          transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
  -webkit-transition-delay: 0s, 0.4s, 0s;
          transition-delay: 0s, 0.4s, 0s;
  box-shadow: 0 0 0 1px currentColor;
  color: inherit;
  cursor: pointer;
  padding: 16.5px 0;
  padding-right: 50px;
  font-weight: lighter;
  font-family: 'Roboto';
}
.inputbox input:focus, .inputbox input:valid {
  width: 100%;
  -webkit-transition-delay: 0.4s, 0s, 0.4s;
          transition-delay: 0.4s, 0s, 0.4s;
  outline: 0;
  border-radius: 0;
  cursor: text;
  padding-left: 16.5px;
}
.inputbox input:focus + .del, .inputbox input:valid + .del {
  pointer-events: all;
  left: calc(100% - 25px);
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.inputbox input:focus + .del:focus, .inputbox input:valid + .del:focus {
  box-shadow: 0 0 0 1px currentColor;
  height: 37.5px;
  width: 37.5px;
}
.inputbox input:focus + .del:before, .inputbox input:valid + .del:before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
      -ms-transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
          transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
  -webkit-transition-delay:...