无限动画关键帧和周期结束时出现z-index问题

问题描述

我有一些动画，最终将有望组成一个纯CSS的。

I have a some animation which in the end will hopefully make up a nice CSS-only Vintage Flip Clock.

基本上，我将数字分为两部分，并在X轴上旋转180°来动画化这两个部分。

Basically i have the numbers split into two parts and animate each of the two parts with a 180° Rotation on the X-Axis.

╔═══════╗
║   ##  ║
║  ###  ║
║ # ##  ║
║   ##  ║
╠═══════╣
║   ##  ║
║   ##  ║
║   ##  ║
║  #### ║
╚═══════╝

但是，由于无穷大关键帧周期我的z索引有问题-在周期结束时，错误的数字位于最前面，因此一会儿显示了错误的数字。

However, due to the infinite cycle of the keyframes I have a problem with the z-index - at the end of the cycle the wrong figure is on top, thus for a brief moment the wrong digits are shown.

我有两个演示版的动画（目前只有webkit前缀）：

I have two demo-versions of the animation (currently only webkit prefixed):

第一个在动画循环中使用z-index，

The first one uses z-index in the animation cycles, the latter one uses the natural ordering (and thus the default z-index) of the figures.

<div class="nr">
    <div class="top t0">0</div>
    <div class="bottom b0">0</div>
    <!-- 1 to 9 -->
</div>

关键帧如下（第一个示例）：

The keyframes are the following (first example):

.top{
    -webkit-transform-origin:50% 100%;
    -webkit-animation-name: flipT;
}
.bottom{
    -webkit-transform-origin:50% 0;
    -webkit-animation-name: flipB;
    -webkit-transform: rotateX(180deg);
}

@-webkit-keyframes flipT {
    from{-webkit-transform:rotateX(0deg)    }
    10% {-webkit-transform:rotateX(-180deg);}
    90% {-webkit-transform:rotateX(-180deg);}
    91% {-webkit-transform:rotateX(0deg);   }
}
@-webkit-keyframes flipB {
    from{-webkit-transform:rotateX(180deg);z-index:100;}
    10% {-webkit-transform:rotateX(0deg);  }
    11% {z-index:0;}
    20% {-webkit-transform:rotateX(0deg);  }
    21% {-webkit-transform:rotateX(180deg);}
}

如果您想知道为什么它们看起来如此奇怪-是为了防止进一步的动画会导致闪烁-您可以通过将透视图更改为较低的值来查看。

If you wonder why they seem to look so strange - it's to prevent further animation which would cause flickering - you can see this by changing the perspective to some low value.

您将在周期结束时看到z-index问题。上述演示之一也有些闪烁。您有解决办法吗？

You will see the z-index problem at the end of the cycle. Also one of the above demos has some flickering. Do you have any idea how to fix this? I can't seem to wrap my head around this.

推荐答案

您可以在这里进行操作：

Here you go:

这是您发布的两者的组合。使用自然顺序，它们都具有相同的索引。因此，使用此概念，我们在0、1和2之间切换。

It's a combination of the two you posted. With natural ordering they all have the same index. So using this concept, we toggle between 0, 1, and 2.

我放慢了速度（有很大帮助），并使用背景色查看了帧的变化。

I slowed it down (helps a lot) and used a background color to see the frames change.

这是关键部分：

@-webkit-keyframes flipT {
    from{-webkit-transform:rotateX(0deg); z-index:1;}
    10% {-webkit-transform:rotateX(-180deg);}
    90% {-webkit-transform:rotateX(-180deg);}
    91% {-webkit-transform:rotateX(0deg); z-index:0;}
}
@-webkit-keyframes flipB {
    from{-webkit-transform:rotateX(180deg); z-index: 2;}
    10% {-webkit-transform:rotateX(0deg);}
    18% {-webkit-transform:rotateX(0deg);}
    19% {-webkit-transform:rotateX(180deg); z-index: 0;}
}

以下是最终版本：

这篇关于无限动画关键帧和周期结束时出现z-index问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！