Question

我目前遇到的问题是z-index在我正在使用的几个CSS动画中无法识别。以下是其中一个有问题的动画的代码...

.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是具有动画背景图像的范围。我遇到的问题是，part-0无法识别其周围其他对象的z索引。我想知道是否有人有解决方法。

css动画的z-index问题

0 个答案: