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

Publicado
Actualizado
Engagements 0 Comentario

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

Comentarios