关键帧CSS动画

Question

您好，我正在尝试模拟翻转倒数计时器，但是在编写代码时，我发现两者之间存在差异：

@keyframes zindex {
0% {
    z-index: 2;
}
5% {
    z-index: 4;
}
100% {
    z-index: 4;
}
}

和：

@keyframes zindex {
0% {
    z-index: 2;
}
100% {
    z-index: 4;
}
}

当我删除5％时，会出现问题，所以我想知道为什么会发生此问题。

这是我的代码：

 body { font: normal 11px "Helvetica Neue", Helvetica, sans-serif; } .wrap { width: 50px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0px 0px -25px; } ul#initial { list-style-type: none; width: 100%; height: 100%; padding: 0px; position: relative; } ul#initial li { position: absolute; top: 0; left: 0; text-align: center; width: 100%; } .first { z-index: 3; } .second { -webkit-animation: zindex 1s 1s linear both; } @keyframes zindex { 0% { z-index: 2; } 5% { z-index: 4; } 100% { z-index: 4; } } .flipthis { height: 50px; width: 50px; position: absolute; top: 0; left: 0; overflow: hidden; background: #bbb; transform-origin: 50% 100%; color: #fff; animation: flipthis 1s linear; } .flipthis-down { height: 50px; width: 50px; background: #0034ff; color: #fff; overflow: hidden; position: absolute; top: auto; left: 0; bottom: 0; } .digit { height: 200%; font-size: 80px; position: absolute; width: 50px; text-align: center; text-shadow:0px 1px 2px rgba(224,224,224,0.87); } .flipthis-down .digit { bottom: 0; } @-webkit-keyframes flipthis { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-90deg); } } .flipthis2 { height: 50px; width: 50px; background: #00ff82; color: #fff; overflow: hidden; position: absolute; top: 0; left: 0; } .flipthis2-down { height: 50px; width: 50px; background: #00f760; color: #fff; -webkit-transform-origin: 50% 0%; overflow: hidden; position: absolute; top: auto; left: 0; bottom: 0; animation: flipthis-down 1s 1s linear; } .flipthis2-down .digit { bottom: 0; } @-webkit-keyframes flipthis-down { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } } a.derp { -webkit-perspective: 2000px; display: block; width: 50px; height: 100px; } 

 <div class="wrap"> <ul id="initial"> <li class="first"> <a class="derp"> <div class="flipthis"> <div class="digit">1</div> </div> <div class="flipthis-down"> <div class="digit">1</div> </div> </a> </li> <li class="second"> <a class="derp"> <div class="flipthis2"> <div class="digit">2</div> </div> <div class="flipthis2-down"> <div class="digit">2</div> </div> </a> </li> </ul> </div> 

Answer 1

在仅完成了5％的动画之后，第一个示例达到了最终值'4'，第二个示例在指定的动画持续时间内线性增加了z-index。

添加多个'％'值会告诉您的浏览器在什么时间点应达到该值，因此您的第一个动画在经过5％的时间后基本上已经完成。