How to animate the height and width using transforms?

user_13899155 0
Viewed 50

there I am trying to build a search bar in which if you hover over the search icon it should expand. But animating the width directly is not performant, so I decided to use transforms but it is not scaling the search bar properly. Here are the screenshots.

when using normal width image

When using transform image

CSS code:

.searchBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8px;
}

.search-content {
  font-size: 10px;
}

.search-input {
  width: 0px;
  background-color: transparent;
  padding: 0.5rem;
  padding-right: 2rem;
  border-radius: 2rem;
  border: none;
  outline: none;
  transition: 0.2s;
}

.searchBox:hover > .search-input {
  /* width: 8rem; */
  transition: scaleX(8rem);
  padding: 0.5rem;
  padding-right: 2rem; 
  background-color: rgb(240, 245, 248);
  box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.2);
}

.searchSvg {
  position: absolute;
  right: 0.62rem;
  transition: 0.3s;
  display: grid;
  place-items: center;
}

Here is the link of codesandbox

reactjs transform css
2 Answers

transform: scaleX(8rem) will not work, you should change it to a plain number without any unit.

Also, I don't think you should use transform: scale() on an input as it would make the text stretched out.

enter image description here

In this case, using the width property for the hover effect is not really affect the overall performance I think.

user_64538220

try this, works fine (just add to below of your css codes):

.search-input {
  transition: width 1s;
}
 
.search-input:hover,.searchBox:hover .search-input{
  width: 200px;
}
user_18164370
Related