CSS animation causing z-index problems

Question

I have a weird conflict in my main.js file. I run a fade up animation on ".main-headline--left"

$('.main-headline--left').addClass('wow animated fadeInUp');

This works fine, but when I add a piece of code that makes nav-links active based on what page the user is on, the animation obstructs the logo which hangs off of the navbar (logo height > navbar fixed height). Here is that code:

if(location.pathname != "/") {
    $('.navbar-nav--split a[href^="/' + location.pathname.split("/")[3] + '"]').addClass('is-active');
} else $('.navbar-nav--split a:eq(0)').addClass('is-active');

I notice this only happens in Chrome. Is there perhaps a better way to organize my Javascript or a better way to write the code so that this problem is rectified?

Here is the css animation:

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
        transition: .1s transform, .1s opacity;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);     
    }
}

I did not explicitly set z-index on containing elements. However, setting a z-index of 9999 on both the logo navbar does not fix the problem.

Answer 1

today I ran into similar issue... I patched it by changing the value of animation-fill-mode for the class animated as below...

.animated
{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: initial; //Changed from both to initial 
animation-fill-mode: initial; /*Changed from both to initial
}

Notably, setting the animation-fill-mode to forwards was causing my issue...

animation-fill-mode: both inherits both forwards as well as backwards property, so my trillionth z-index element got hid under the millionth z-index element...

Setting it to initial worked for me.

Answer 2

I found a fix to my problem, but I have no idea why this solution works. By adding "-webkit-backface-visibility: hidden;" to my logo element, my logo no longer gets cropped when the animation on my headline and the transition on my anchor's pseudo element are run on load. I was wondering whether anyone knows why this would fix this problem. My logo element never moves on the z axis. There is a jsfiddle in the comment section that shows the code