CODEWITHSUNDEEP
htmlcss
AmmanM
AmmanM

Reputation: 107

My search bar animation isn't animating properly

On my website, I'm trying to create an animation where if you float your mouse over the search icon, a text box would slide up underneath the icon like the example shown below.

bar

The problem with mine though is that when I float my mouse over the search icon, the text box instead pops out of nowhere and slides to the right instead of underneath.

bar2

Sometimes, it just spazzes out and goes left and right at a fast rate when I float over it.

I followed the example code at this website and copied it but it isn't animating properly . I even tried to tweak it such as changing the name of the element to moving the position but it still isn't doing it correctly. I don't know what I am doing wrong.

form {
  transform: translate(-50%, -50%);
  transition: all 1s;
  background: white;
  box-sizing: border-box;
  border-radius: 25px;
  border: 4px solid white;
  padding: 10px;
}
.search {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 42.5px;
  line-height: 30px;
  outline: 0;
  border-width: 1px;
  display: none;
  font-size: 1em;
  border-radius: 20px;
  padding: 0 20px;
}
.fa {
  box-sizing: border-box;
  padding: 10px;
  width: 42.5px;
  height: 42.5px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  color: #05050a;
  text-align: center;
  font-size: 1.2em;
  transition: all 1s;
}

form:hover {
  width: 300px;
  cursor: pointer;
  margin-left: 100px;
  margin-right: -100px;
}

form:hover .search {
  display: block;
}

form:hover .fa {
  background: #ffffff;
  color: white;
}
<form action="">
   <input class="search" type = "search" />
   <i class="fa">
      <img src = {search} alt = "Search" width="22" height="22"></img> 
   </i>                    
</form>

Upvotes: 0

Views: 169

Answers (1)

Asaad Mahmood
Asaad Mahmood

Reputation: 426

You can do this:

form {
  display: flex;
  justify-content: center;
}

.input-container {
  position: relative;
  box-sizing: border-box;
  border-radius: 25px;
  border: 4px solid white;
  color: white;
}

.search {
  transition: all 1s;
  height: 42.5px;
  line-height: 30px;
  outline: 0;
  border-width: 1px;
  width: 42.5px;
  font-size: 1em;
  border-radius: 20px;
  padding: 0 20px;
}

.fa {
  box-sizing: border-box;
  padding: 10px;
  width: 42.5px;
  height: 42.5px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  color: #05050a;
  text-align: center;
  font-size: 1.2em;
  transition: all 1s;
}

.input-container:hover .search {
  width: 300px;
    color: black;
}

.input-container:hover .fa {
  background: black;
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />

<form action="">
  <div class="input-container">
    <input class="search" type="search" />
    <i class="fa fa-search">
   </i>
  </div>
</form>

Upvotes: 1

Related Questions