При фокусировке в поиске входные данные поиска увеличиваются влево и не покрываются значком svg.Но фокусировка ввода сжимается вправо, чтобы покрыть значок svg.Я хочу использовать ту же анимацию, что и при фокусировке (которая должна быть изменена), не закрывая значок svg.Я могу начать фоновую анимацию раньше.Но я не хочу решать эту проблему путем изменения времени анимации цвета фона.Как я могу решить это?
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
line-height: 1.6;
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
height: 5rem;
width: 100%;
background-color: orangered;
background: #6f42c1;
background: linear-gradient(30deg, #6f42c1 35%, #6610f2 75%, #007bff 100%);
box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.75);
margin-top:5rem;
}
.search-3 {
margin-right: 2rem;
display: inline-block;
position: relative;
height: 3rem;
width: 0;
}
.search-3__text {
display: inline-block;
height: 3rem;
width: 3rem;
background-color: transparent;
border: none;
outline: none;
border-radius: 2px;
font-family: "Roboto Slab", serif;
font-size: 1.6rem;
font-weight: 400;
color: #000;
position: absolute;
top: 0;
right: 0;
z-index: 5;
cursor: pointer;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0s, background-color 0.2s ease-out 0.4s;
}
.search-3__text::placeholder {
color: transparent;
font-size: 1.5rem;
font-weight: 300;
font-style: italic;
transition: color 0s ease-in-out 0s;
}
.search-3__text:focus {
width: 50rem;
z-index: 3;
cursor: text;
background-color: #fff;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0.2s, background-color 0.2s ease-in-out 0s;
}
.search-3__text:focus::placeholder {
color: #000;
transition: color 0.2s ease-in-out 0.5s;
}
.search-3__icon {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 4;
cursor: pointer;
}
.search-3__icon svg {
display: inline-block;
height: 2rem;
width: 2rem;
color: #000;
filter: drop-shadow(2px 1px 1px #7A8288);
}
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400i,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" viewBox="0 0 26 28">
<title>search</title>
<path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z">
</path>
</symbol>
</defs>
</svg>
<div class="wrap">
<form class="search-3" action="" autocomplete="on">
<input class="search-3__text" id="search-3" name="search-3" type="text" placeholder="Sitede ara.." page_search onfocusout="if(this.value !=''){this.value='';}">
<span class="search-3__icon">
<svg>
<use xlink:href="#icon-search" />
</svg>
</span>
</form>
</div>
</body>