CSS animation causing z-index problems

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.

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

@GughaG's answer is right if don't need forwards, but if you do need, try adding position: absolute -- fixed me right up!