CODEWITHSUNDEEP
javascripthtmlcss
Bo Huang
Bo Huang

Reputation: 181

Search box animation

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!

Upvotes: 3

Views: 85

Answers (2)

afterburn
afterburn

Reputation: 148

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

Upvotes: 1

Chrisstar
Chrisstar

Reputation: 656

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.

Upvotes: 1

Related Questions