<div class="base">
  <input type="text" />
  <div class="search-box"></div>
  <div class="cross">X</div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.base {  
  margin: 100px auto;
  position: relative;
  height: 56px;
  width: 500px;
}
.search-box {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  background: white;
  z-index: 9;
  transition: .3s;
  transform: translate(2px, 2px);
}
.search-box:before, .search-box:after {
  content: "";
  position: absolute;
}
.search-box:before {
  width: 16px;
  height: 16px;
  border: 2px solid orange;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.search-box:after {
  width: 2.5px;
  height: 8px;
  background: orange;
  top: 50%;
  left: 50%;
  transform: translate(8px, 5px) rotate(-45deg);
}
input {
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 10px;
  border: none;
  color: white;
  font-size: 14px;
  background: #666;
  position: absolute;
  z-index: 6;
  transition: .3s;
}
.cross {
  cursor: pointer;
  font-size: 25px;
  transition: .3s;
  position: relative;
  z-index: 3;
  display: inline-block;
  transform: translate(20px, 11px) rotate(-360deg);
}
.move-search {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translate(355px, 5px);
}
.active input {
  width: 400px;
  height: 50px;
  padding: 0 60px 0 20px;
  border-radius: 30px;
}
.show-cross {
  transform: translate(420px, 11px) rotate(0deg);
}

$('.search-box').click(function(){
  $('.base').addClass('active');
  
   setTimeout(function(){
    $('.cross').addClass('show-cross')
    }, 300);
  
    setTimeout(function(){
      $('.search-box').addClass('move-search')
      }, 100);
}); 

$('.cross').click(function(){
  setTimeout(function(){
    $('.base').removeClass('active');
  }, 100);
  
  $('.cross').removeClass('show-cross');
    
  $('.search-box').removeClass('move-search');
});