Search box animation

Question

I created a search box animation. when click on the icon, it opens. The problem is when I click on the "x" to close the box, it moves to right end first and then close. This is the link:enter code herehttps://codepen.io/BeauBo/pen/YxNwpp . Anybody can help me with this? Thanks in advance!

Answer 1

It interferes with another class from "close.less" (I couldn't figure out where this css comes from). If you just rename your "close" class to something like "close-form", it should work fine.

Answer 2

The reason your search bar is being moved to the right is because your form is getting float: right; when the close button is pressed.

Add the following to your form.close class in your css to fix this issue.

form.close,
form.close .bar,
form.close .bar:before,
form.close .bar:after {
    float: none;
    animation-direction: reverse;
}