Cómo animar el ancho de una caja de texto cuando se hace foco en ella

Para animar una caja de texto (Como el de un buscador) al momento del evento "FOCUS" (Cuando obtiene el foco) podemos usar el siguiente código css para hacer el efecto

input.search{
          transition:width .3s ease;
          width:150px;
        }
        input.search:focus{
          transition:width .3s ease;
          width:300px;
          
        }

<input class="search" placeholder="Buscar..." type="search">

A continuación un ejemplo más elaborado en codepen

 

Ver ejemplo en codepen