How do I create animation on hide/show?

Question

    <div class="overlay"></div>

CSS:

    .overlay::after
     {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           content: "";
           z-index: -1;
           height: 100%;
           transition: all 0.5s ease-in-out;
           opacity: 0.5;
        }

        .popup::before
        {
           content: "";
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;. 
           height: 100%;
           z-index: -1;
           transition: all 0.5s ease-in-out;
        }

This is my overlay class. I display this div as mask for all the popups. But the problem is it doesn't show me any animations even though I have transition property. I want to bring it left to right end. I can do this by giving negative left while hidden and positive left while shown. Is there any way to achieve this without having negative left. Any suggestions??

check this link http://stackoverflow.com/questions/1025074/jquery-animate-hide-and-show http://stackoverflow.com/questions/17638990/jquery-show-and-hide-div-on-mouse-click-animate — Prashant, Apr 04 '15 at 05:53
u can use keyframe like this link http://jsfiddle.net/simurai/CGmCe/light/ http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1 — Prashant, Apr 04 '15 at 06:46

Gildas.Tambo · Answer 1 · 2015-04-04T08:41:45.020

pure css could be

*{box-sizing: border-box}
menu{
  position: absolute;
  top: 40px;
  left: -200px;
  width: 200px;
  display: block;
  background: black;
  color: white;
  transition: left .3s ease
}
menu li{padding: 10px 14px}
input:checked + menu{
  left: 0
}
label{cursor: pointer}

<label for=toogleMenu >Click to toggle the Menu </label>
<input type=checkbox id=toogleMenu hidden />
<menu>
  <li>Home</li>
  <li>Work</li>
  <li>Contact</li>
  <li>Help</li>
</menu>

Using transform

*{box-sizing: border-box}
menu{
  position: absolute;
  top: 40px;
  left: 0px;
  width: 200px;
  display: block;
  background: black;
  color: white;
  transform: translateX(-200px);
  transition: transform .3s ease
}
menu li{padding: 10px 14px}
input:checked + menu{
  transform: translateX(0);
}
label{cursor: pointer}

<label for=toogleMenu >Click to toggle the Menu </label>
<input type=checkbox id=toogleMenu hidden />
<menu>
  <li>Home</li>
  <li>Work</li>
  <li>Contact</li>
  <li>Help</li>
</menu>

Thanks Tambo. So I must use negative left to achieve this transition effect with CSS.. — Gibbs, Apr 04 '15 at 08:36
I am using pseudo classes. Not separate class. If i apply this property to pseudo class, it ll move popup also. — Gibbs, Apr 06 '15 at 15:47

How do I create animation on hide/show?

1 Answers1