CSS3 animation behaves weird

Question

I have a pop-up menu that fades in (jQuery). The menu contains several items that fade in from bottom up (CSS3). I created an easier variant in jsFiddle that works fine, but when I try to add it to my site it starts to behave weirdly. I guess the problem has to do with one of the divs around the items, however, after a lot of effort I still haven't managed to solve the problem.

The easier variant (jsFiddle). Here you can see the correct CSS3 animation:

http://jsfiddle.net/VV2ek/5987/

The one that should work but doesn't (CSS3 + jQuery):

https://codepen.io/anon/pen/eGzGZX

[Edit] I'm trying to create the effect on this page (press on the menu button): http://www.vermont.eu/about?store=6

The codepen script:

$('.button').click(function(e) {
		$(".menu-resp").fadeToggle(500);
    $(".respm1, .respm2, .respm3, .respm4, .respm5, .respm6").toggle(500);
});

.menu-resp {
	width: 100%;
	height: 100%;
	position: absolute;
  background-color: #000000;
	z-index: 2;
	display: none;
}
.menu-resp .menu-resp-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.menu-resp .menu-resp-box .item {
	font-family: 'Gotham-light', sans-serif;
	font-weight: 300;
	color: #ffffff;
	letter-spacing: 5px;
	text-align: center;
	font-size: calc(20px + 0.4vw);
	width: 300px; /* VIKTIGT */
	line-height: 230%;
	cursor: pointer;
}






/* Fade Effect */

.respm1 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.9s;   
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.respm2 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;   
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -1s;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.respm3 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.6s;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.respm4 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.7s;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.respm5 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.respm6 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
@keyframes fadein {
    0% {
        opacity: 0;
		    -moz-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		    -webkit-transform: translateY(-40px);
		    transform: translateY(-40px);
    }
    100% {
        opacity:1;
        -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
	    	-webkit-transform: translateY(0px);
	    	transform: translateY(0px);
		    opacity: 1;
    }
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
		    -moz-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		    -webkit-transform: translateY(-40px);
		    transform: translateY(-40px);
    }
    100% {
        opacity:1;
        -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
	    	-webkit-transform: translateY(0px);
	    	transform: translateY(0px);
		    opacity: 1;
    }
}
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
		    -moz-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		    -webkit-transform: translateY(-40px);
		    transform: translateY(-40px);
    }
    100% {
        opacity:1;
        -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
	    	-webkit-transform: translateY(0px);
	    	transform: translateY(0px);
		    opacity: 1;
    }
}
@-o-keyframes fadein {
    0% {
        opacity: 0;
		    -moz-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		    -webkit-transform: translateY(-40px);
		    transform: translateY(-40px);
    }
    100% {
        opacity:1;
        -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
	    	-webkit-transform: translateY(0px);
	    	transform: translateY(0px);
		    opacity: 1;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">PRESS</div>

<div class="menu-resp">
  <div class="menu-resp-box">
    <div class="item respm1">#1 Item</div>
    <div class="item respm2">#2 Item</div>
    <div class="item respm3">#3 Item</div>
    <div class="item respm4">#4 Item</div>
    <div class="item respm5">#5 Item</div>
    <div class="item respm6">#6 Item</div>
  </div>
</div>

Answer 1

Check this out, i think this is more what you wanted? codepen

The problem with your code was, that your items and the container had display: none.

therefore they all kinda started to show up from the middle. What i did was to toggle the class show on the container, which sets the opacityvalue from 0 to 1 and to toggle the class animate on the items.

Another thing i noticed was that you a negative value for your animation-delay i reverted that. Now the timing might not be perfect, but this should help you out further.

Edit: currently there's also an opacity: 0 on the item class, to let them be shown after they animate i set animation-fill-mode: forwards and i added a transition to the menu-resp class, to make the appearing smoother: transition: opacity .3s;