0

I'm currently having an issue with z-indexes not being recognized on several CSS animations I'm using. Here is the code of one of the problematic animations...

.animal {
    .part-0 {
        @include animation(animal-movement, 1.5, infinite, linear);
    }
}
@keyframes animal-movement {
    25% {
        transform: rotate(1deg);
    }
    50% {
        transform: translate(2px, -4px) rotate(2deg);
    }
    75% {
        transform: rotate(-1deg);
    }
}

@-webkit-keyframes animal-movement {
    25% {
        -webkit-transform: rotate(1deg);
    }
    50% {
        -webkit-transform: translate(2px, -4px) rotate(2deg);
    }
    75% {
        -webkit-transform: rotate(-1deg);
    }
}

.animal {
        .part-0 {
            width: 60px;
            height: 73px;
            top: 80px;
            left: 0px;
            background-position: 0px 0px;
            position: absolute;
            z-index: 2;
            background-image: url(/images/1970-characters-animated.png);
        }
    }

HTML

<article class='character character-animal animal-movement' style='top:0px; left:1875px;'>
    <a class='animal animal-movement' href='/character/1970/patty-jimmy patty-jimmy-movement.html' id='animal animal-movement' style='background-image: url(/images/1970-characters.png); width:272px; height:170px; background-position: 0px -650px;' title='Patty &amp; Jimmy'>
      Animal
      <span class='part-0'></span>
    </a>
</article>

part-0 is a span that has a background image that is animated. The problem I'm having is that part-0 is not recognizing z-indexes of other objects around it. I was wondering if anyone had a workaround to this.

broadbent
  • 101
  • 9
  • Post your html please, hard to tell what's going when you only provide the css – Huangism Mar 17 '14 at 19:23
  • What's the actual issue? part-0 is under something or above something that it is not supposed to be under/above? if you can demonstrate the issue in http://jsfiddle.net that would be best – Huangism Mar 17 '14 at 19:27
  • part-0 is ignoring any z-index given to it in the CSS, which is causing it overlap over other elements when it should be behind them. I believe this is do to the rotate portion of the animation but am not entirely sure – broadbent Mar 17 '14 at 19:29
  • with the given code, part-0 is the only thing with z-index so it makes sense it will overlap everything else – Huangism Mar 17 '14 at 19:32
  • There are other elements also with higher z-indexes that were overlapping part-0 prior to an animation being added that are still positioned in the same spot. I didn't post the entire code because it's not relevant – broadbent Mar 17 '14 at 19:37
  • These might help you, http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d and https://daneden.me/2012/04/22/css-transforms-and-z-index/ – Huangism Mar 17 '14 at 19:40
  • Do a fiddle! will help us out understand your problem more.. – Nevin Madhukar K Mar 19 '14 at 04:17

0 Answers0