循环结束时的无限动画关键帧和 z 索引问题

我有一些动画，最终希望能组成一个漂亮的纯 CSS 动画.

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

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

然而，由于关键帧的无限循环，我在 z 索引方面遇到了问题 - 在循环结束时，错误的数字位于顶部，因此短暂地显示了错误的数字。

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

z-index 预先声明 http://jsfiddle.net/Ddsvu/4/

重新排序的标记 http://jsfiddle.net/wwThL/

第一个在动画循环中使用 z-index，后一个使用图形的自然排序（以及默认的 z-index）。

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

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

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

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

您将在循环结束时看到 z-index 问题。上述演示之一也有一些闪烁。您知道如何解决这个问题吗？我似乎无法理解这一点。

^{Sidenote: Is SASS choking on the @keyframe directive, because the animations won't get played when I switch the CSS Panel to SCSS?}

干得好：

http://jsfiddle.net/2TAc4/ http://jsfiddle.net/2TAc4/

这是您发布的两个的组合。按照自然排序，它们都具有相同的索引。因此，利用这个概念，我们可以在 0、1 和 2 之间切换。

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

这是关键部分：

@-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;}
}

这是最终版本：

http://jsfiddle.net/S6EMe/ http://jsfiddle.net/S6EMe/