Как сделать анимированный поиск?

$('.search__label').on('click', function(e){ 
  e.preventDefault(); 
   
  var $this = $(this), 
      form = $this.closest('.search__form'), 
      input = form.find('.search__input'); 
   
  input.toggleClass('show'); 
}); 
 
$(document).mouseup(function (e) { 
  var container = $('.search__input'); 
  if (container.has(e.target).length === 0 &&  
      $(e.target).closest('form').length === 0){ 
    container.removeClass('show'); 
  } 
});

*{ 
  box-sizing: border: box; 
} 
 
.search__form { 
  width: 300px; 
  overflow: hidden; 
  position: relative;   
} 
 
.search__label { 
  cursor: pointer; 
  width: 30px; 
  height: 30px; 
  position: absolute; 
  top: 5px; 
  right: 0; 
} 
 
.search__input { 
  width: 0px; 
  opacity: 0; 
  float: right; 
  padding-right: 35px; 
  height: 30px; 
   
  transition: all .3s ease-in-out; 
} 
 
.search__input.show { 
  width: 100%; 
  opacity: 1; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
   
<form class="search__form"> 
  <input type="search" name="search" id="search" class="search__input" placeholder="Search"> 
  <label for="search" class="search__label"><i class="fa fa-search" aria-hidden="true"></i></label> 
</form>