I know something similar has been asked before here.
But it's a little different as it involves css transitions.
http://jsfiddle.net/fariskassim/rWNJN/4/
.panel{
width:inherit;
height: 0%;
display:block;
position: absolute;
background: #000;
opacity:0;
z-index: 2;
margin-top: 40px;
margin-right: 40px;
margin-left: 40px;
margin-bottom: 40px;
bottom:0;
top:0;
left:0;
right:0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
When the box is opened,
i'm trying to get the green box have a 40px on all sides from the browser perimeter, I've managed to do it for the left / right and top but bottom is a problem.
Any idea how do i fix this?
EDIT: at the same time, i still want the wipe in and out effect when opening and closing the box.
That is because you have given height:100% in the .panel:target. Remove it then it will be fine.
.panel:target{
background-color: rgba(226, 229, 16, 0.8);
opacity:100;
width:inherit;
display:block;
margin-top: 40px;
margin-right: 40px;
margin-left: 40px;
bottom:0;
top:0;
left:0;
right:0;
}