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 opacity value 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;