CODEWITHSUNDEEP
htmlcssanimationcss-animations
Mihir Patel
Mihir Patel

Reputation: 2372

CSS Animate- Slide out search bar smoothly

I am new to CSS animation and wondering if someone can assist me. I have a search bar which slides in and out via CSS animation on a button click. The slide in works fine but when it slides out it just collapses. I would like to slide out smoothly as well. Here is my code.

HTML

<div class="slideright">
bunch of HTML...button and input 
</div>

CSS ANIMATION

.slideright {
    animation-name: slideright;
    -webkit-animation-name: slideright; 

    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideright {
    0% {
        transform: translateX(-100%);
    }       
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideright {
    0% {
        -webkit-transform: translateX(-100%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}

Thanks for help in advance

Upvotes: 1

Views: 2281

Answers (1)

max
max

Reputation: 8687

You do not have to use animations for this:

HTML:

<div>bunch of HTML...button and input </div>
<button>Click</button>

CSS:

div {
  transform: translateX(-100%);
  transition: transform 1s;
}
.slideright {
  transform: translateX(0);
}

JS:

$('button').click(function () {
  $('div').toggleClass('slideright')
});

CODEPEN

Upvotes: 2

Related Questions