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/

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

1 个答案: