關鍵幀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％的時間后基本上已經完成。