<div class="searchbox">
  <input type="" placeholder="Search..."/>
  <button class="submit"></button>
  <div class="line"></div>
</div>

body {
  background: black;
}
.searchbox {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 300px;
  height: 60px;
  overflow: hidden;
}
input {
  position: absolute;
  left: 0;
  width: 100%;
  padding-right: 50px;
  box-sizing: border-box;
  height: 50px;
  border: 0;
  font-size: 30px;
  background: transparent;
  color: white;
  outline: none;
}
button {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  outline: none;
}
.line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height:3px;
  background: #fff;
}
.submit {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.submit::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  left: 10%;
  top: 10%;
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
}
.submit::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 14px;
  background: #fff;
  transform-origin: 50% 0%;
  transform: rotate(-45deg);
  top: 60%;
  left: 60%;
}

var scene = new Scene({
  ".searchbox": {
    "0%" : "width: 50px",
    "70%": "width: 300px",
  },
  ".line": {
    "30%" : "width: 0%",
    "100%": "width: 100%",
  }
}, {
  duration: 1,
  easing: Scene.EASE_IN_OUT,
  selector: true,
}).exportCSS();

scene.setTime(0);
var toggle = false;

document.querySelector(".submit").addEventListener("click", function() {
  toggle = !toggle;
  scene.setDirection(toggle ? "normal" : "reverse");
  scene.play();
});