Javascript CSS动画导致z索引问题

我的main.js文件中有一个奇怪的冲突。我在“.main headline--left”上运行淡入淡出动画

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

这很好，但当我添加一段代码，使导航链接根据用户所在的页面处于活动状态时，动画会阻止挂在导航栏上的徽标（徽标高度>导航栏固定高度）。这是代码：

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

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');

我注意到这只发生在Chrome中。是否有更好的方法来组织我的Javascript或编写代码以纠正此问题

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

以下是css动画：

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

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

---

我没有在包含元素上显式设置z-index。但是，在徽标导航栏上都设置9999的z索引并不能解决问题。

我找到了解决问题的方法，但我不知道为什么这个解决方案有效。通过将“-webkit backface visibility:hidden；”添加到我的logo元素中，当标题上的动画和锚点伪元素上的过渡加载时，我的logo不再被裁剪。我想知道是否有人知道为什么这会解决这个问题。我的徽标元素从不在z轴上移动。注释部分有一个JSFIDLE，显示了今天我遇到的类似问题的代码。。。我通过改变动画类的动画填充模式值来修补它，如下所示

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

.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
}

值得注意的是，将动画填充模式设置为“前进”会导致我的问题

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

动画填充模式：两者都继承向前和向后属性，因此我的第万亿个z索引元素隐藏在第一百万个z索引元素下

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

---

将其设置为initial对我来说很有用。

@GughaG的答案是正确的，如果你不需要前锋，但如果你确实需要，请尝试添加position:absolute——马上修复我

非常不清楚，即使标题是css动画，也没有代码显示该动画是什么或相关的z索引是什么。我已使用css动画和本例中有关z索引的信息更新了问题。这种行为可能与z-index无关，可能是Chrome中的一个bug，因为这两段代码彼此无关，导致我的徽标被修剪到父navbar容器中，直到动画完成运行。如果包含所有相关的HTML和CSS，这将更容易；足以重现问题。尤其是

是活动的

类。目前我只能说，

不透明度

可能会导致问题，因为它会干扰z层。该类非常基本，但涉及定制的mixin，它会从悬停时的伪元素创建一条线。我真的不认为通过深入研究代码的内部工作就可以解决问题，因为1）它们很简单，这是一个复杂的问题，是由交互作用产生的2）两个代码块独立地工作得很好，3）这两段代码在除Chrome以外的浏览器中运行良好。我想我正在寻找有关Chrome bug的信息。我想知道是否有人在处理Chrome中的动画时遇到过类似的问题。这应该是正确的答案！我已经试着解决这个问题好几个小时了。。。像个魔术师一样工作；）也帮我解决了。这对我来说是一个很大的难题。谢谢

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