How to animate search form input

you can animate search input box using focus :focus CSS pseudo-class.

<style>
 .search{
  width:90px;
  transition:1s;
  height:40px
}
.search:focus{
  width:300px;
  transition:1s;
}
</style>

<input type="text" class="search" placeholder="Enter here for search..">