HTML ve CSS ile Animasyonlu Arama Kutusu

<div class="search-container">
  <form action="/search">
    <input type="text" placeholder="Search..." name="q">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

.search-container {
  display: flex;
  align-items: center;
  width: 500px;
  height: 50px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  transition: width 0.5s ease-in-out;
}

.search-container:hover {
  width: 550px;
  border-color: #333;
}

.search-container form {
  display: flex;
  width: 100%%;
  height: 100%%;
}

.search-container input[type="text"] {
  flex: 1;
  padding: 0 20px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #333;
  outline: 0;
}

.search-container button[type="submit"] {
  width: 50px;
  height: 100%%;
  background: #333;
  color: #fff;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.5s ease-in-out;
}

.search-container button[type="submit"]:hover {
  background: #666;
}