How can I change the order of transition? - html

Question

The transition is not suppose to show on page load. I need to change the direction so that when a user scrolls down they need to click the button in order to see the content that resides within the black box. In other words, the black box is not suppose to show until a user tells it to.
The button is the three gray dots towards the middle.
DEMO
<style> body, .container, .content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #fff;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover, .menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: absolute;
background: #fff;
overflow-y: visible;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: none;
content:'';
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
/* Menu Button 1 */
.menu-button {
position: absolute;
z-index: 1000;
margin: 1em;
padding: 0;
width: 10px;
height: 50px;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
opacity: 1;
top: 510px;
left: 855px;
-ms-transform: rotate(7deg);
/* IE 9 */
-webkit-transform: rotate(7deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.2em;
bottom: 0.4em;
left: -1px;
background: linear-gradient(#929292 20%, transparent 20%, transparent 40%, #929292 40%, #929292 58%, transparent 0%, transparent 80%, #929292 80%);
content:'';
}
.menu-button:hover {
opacity: 1;
}
/* Close Button */
.close-button {
width: 50px;
height: 50px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
opacity: 0;
}
.close-button::before, .close-button::after {
content:'';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Comments */
.menu-wrap {
position: absolute;
z-index: 1000;
width: 429.0500011444092px;
height: 600.875px;
right: 0;
background: #0C0C0C;
top: 6px;
padding: 0;
font-size: 1.15em;
-webkit-transform: translate3d(500px, 0, 0);
transform: translate3d(500px, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.menu, .icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0, 500px, 0);
transform: translate3d(0, 500px, 0);
}
.icon-list, .icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0, 1500px, 0);
transform: translate3d(0, 1500px, 0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0, 2500px, 0);
transform: translate3d(0, 2500px, 0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list, .show-menu .icon-list a {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>