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

Question

我有一些动画，希望它最终会组成一个漂亮的纯 CSS Vintage Flip Clock。

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

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

但是，由于关键帧的无限循环，我的 z-index 存在问题 - 在循环结束时，错误的数字位于顶部，因此会在短时间内显示错误的数字。

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

z-index predeclared

reordered markup

第一个在动画循环中使用 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 问题。上述演示之一也有一些闪烁。你知道如何解决这个问题吗？我似乎无法理解这一点。

^{旁注：SASS 是否因@keyframe 指令而窒息，因为当我将 CSS 面板切换到 SCSS 时动画不会播放？}

Answer 1

给你：

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/