SOURCE

$(".ion-ios-search").click(function(){
  if (!$(".search").hasClass("active")) {
       $(".search").addClass("active");
  }
})

$(".ion-ios-close-empty").click(function(){
  $(".search").removeClass("active");
})

<div class='background'>
  <div class='main'>
    <div class='search'>
      <input placeholder='Search' type='text'>
      <i class='icon ion-ios-search'></i>
      <i class='icon ion-ios-close-empty'></i>
    </div>
    <div class='results'></div>
  </div>
</div>

* {
  transition:0.5s ease all;
  font-family:"Avenir", "Helvetica Neue"
}

.background {
  position:fixed;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background: #225faa;
  background: linear-gradient(135deg,      #7CB9B3 0%,darken(#7CB9B3, 40%) 100%);
  overflow:scroll;
}

.main {
  margin:260px auto;
  width:90%;
  max-width:600px;
}

.search {
  width:40px;
  height:40px;
  border-radius:20px;
  background-color:white;
  box-shadow:0px 1px 2px rgba(0,0,0,0.5);
  text-align:center;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  animation: hide 500ms ease;
  margin:0px auto;
  
  input {
    display:none;
    position:absolute;
    top: 0;
    bottom: 0;
    position: absolute;
    left: 0px;
    width: 80%;
    border: 0;
    outline: 0;
    border-radius: 5px;
    padding: 5px 20px;
  }
  
  &:hover {
  box-shadow:0px 3px 5px rgba(0,0,0,0.5);
   transform:translateY(-2px);
  }
  
  &.active {
    width:100%;
    text-align:left;
    padding: 0 10px;
    animation: show 500ms ease;
    transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,1,1);
    
    input {
      display:block;
    }
    
    .ion-ios-search {
      display:none!important;
    }
    
    .ion-ios-close-empty{
      float:right;
      display:block!important;
    }
  }
  
  .icon {
    font-size:1.2em;
    line-height:40px;
    
    &.ion-ios-search {
      display:block;
    }
    
    &.ion-ios-close-empty {
      display:none;
      font-size:1.6em;
      padding:0px 10px;
    }
  }
}

@keyframes hide {
  0% {transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,1,1);}
  20% {transform:rotate(-5deg) matrix3d(0.8,0,0.00,0,0.00,0.8,0.00,0,0,0,1,0,0,-20,1,1);
  }
  
  100% {transform: rotate(0deg) matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,1,1);}
}

@keyframes show { 
  0% {transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,1,1);}
  10% {transform:rotate(10deg) matrix3d(1.1,0,0.00,0,0.00,1.1,0.00,0,0,0,1,0,0,10,1,1);
  }
  80% {transform:rotate(-5deg) matrix3d(1,0.1,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,1,1); 
  }
  100% {transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,1,1);}
}