How to animate the height and width using transforms?-CodePudding

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

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

CodePudding user response：

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;
}