0
400
Vistasla animación de texto de entrada no funciona al enfocarse si no hay texto
Tengo un problema con mi barra de búsqueda.
Cuando el usuario hace clic en él, se expande con una animación simple para permitirle escribir, y debería reproducir la animación al revés si el usuario hace clic en otra parte de la página. El problema es que, si no hay texto, la animación no se reproduce hacia atrás, simplemente vuelve al tamaño predeterminado, como puede ver en el gif a continuación. 
CSS
.searchbar { margin-right: 10%; width: 20%; height: 50%; outline: none; border:0; outline:0; background-image: url('search.png'); background-position: right; background-repeat: no-repeat; background-size: contain; -webkit-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; cursor: pointer; } .searchbar:focus { width: 90%; background-color: #E0FFFF; border-radius: 20px; text-indent: 10px; cursor: auto; }y el HTML
<input type="text" class="searchbar"></div>2 Respuestas
Responde la pregunta0
sus códigos funcionan correctamente. y puede ver a continuación (agrego border para ver eso).
pero su problema se debe a que la transition: width 0.2s ease-in-out está configurado solo para la propiedad de width , establezca la transition: all 0.2s ease-in-out para una mejor vista.
.searchbar { border : 1px solid; margin-right: 10%; width: 10%; height: 50%; outline: none; outline:0; background-image: url('search.png'); background-position: right; background-repeat: no-repeat; background-size: contain; transition: all 0.2s ease-in-out; cursor: pointer; border-radius: 20px; } .searchbar:focus { width: 90%; background-color: red; border-radius: 20px; text-indent: 10px; cursor: auto; } <input type="text" class="searchbar"></div>0
Puedes ver aquí
Aplico .searchbar background-color: transparent;
*, *::before, *::after { box-sizing: border-box; } body{ min-height: 100vh; overflow: hidden; display: grid; place-content: center; margin:0; background-color: bisque; } .container{ width:50vw; height: 12.5vh; display: flex; flex-direction: row; justify-content: end; align-items: center; background-color: whitesmoke; border-radius: 4rem; } .searchbar { margin-right: 1rem; display: block; border-top-right-radius: 4rem; border-bottom-right-radius: 4rem; width: 10%; height: 4rem; outline: none; border:0; outline:0; background-image: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fassets.stickpng.com%2Fthumbs%2F585e4ad1cb11b227491c3391.png&f=1&nofb=1'); background-position: right; background-repeat: no-repeat; background-size: contain; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; cursor: pointer; background-color: transparent; font-size:2rem; } .searchbar:focus { width: 50%; background-color: #E0FFFF; border-radius: 4rem; text-indent: 10px; cursor: auto; } <div class="container"> <input type="text" class="searchbar" id="searchbar" /> </div>