search icon transform in search box.html

search icon transform in search box.html

<div class="searchBox">
  <input type="text" class="searchInput" placeholder="Search">
  <div class="searchHandle"></div>
</div>

-----------------

*{
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  height: 100px;
}
.searchBox{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 35px;
}
.searchInput:placeholder{
  color: white;
}
.searchInput{
  background: transparent;
  border: 2px solid white;
  position:relative;
  color: white;
  caret-color: white;
  width: 0px;
  height: 20px;
  border-radius: 12px; /*half of height + 2px for border*/
  padding: 10px;
  outline: none;
  cursor:pointer;
  transition: height 0.4s linear,
              width 0.5s linear 0.4s;
/*Animate height first and then animate width after delay of 0.4s(time taken for animating height)*/
}
.searchBox:hover .searchInput{
  width: 200px;
  height: 35px;
  border-radius: 17.5px; /*half of height*/
}
.searchHandle{
  width: 10px;
  height: 3px;
  background: white;
  border-radius: 3px;
  opacity:1;
  transform:rotate(45deg) translate(4px,11px);
  transition: transform 0.4s linear,opacity 0.4s linear 0.3s;
}
.searchBox:hover .searchHandle{
  transform:rotate(-300deg) translate(4px,11px);
  transition: opacity 0.4s linear,transform 0.4s linear 0.3s;
  opacity: 0;
}