如何獲得一個CSS動畫通過正確的步驟來運行

Question

我有這樣的代碼中CSS：

@keyframes blink 
{ 
    0% { background: #000000; } 
    100% { background: #b22222; } 
} 

.alert 
{ 
    animation: blink 2s steps(2) infinite; 
} 

我已經在0％創建的框架，並在100％，我成立了動畫有兩個步驟，使背景從黑色閃爍到明亮的紅色。

我會認爲播放動畫時的兩個步驟是0％和100％，但它看起來好像兩個步驟分別爲0％和50％。因爲我沒有明顯的發紅，但更多的是0％幀和100％幀之間的混合。

我該如何讓這個動畫正確地執行兩個步驟，一步到達0％，一個到達100％？

Answer 1

要它的工作，你應該改變兩件事情：

• 變化animation-timing-function到step(1) - 讓你的動畫只有一個步驟（50％），除了初始狀態（0％）。
• 更改100%到50% - 因爲您希望顏色在動畫持續時間的中間更改。

，它將作品：

@-webkit-keyframes blink 
 
{ 
 
    0% { background: #000000; } 
 
    50% { background: #b22222; } 
 
} 
 

 
.alert 
 
{ 
 
    -webkit-animation: blink 2s steps(1) infinite; 
 
    color: white; 
 
}

<div class="alert">Hello</span>

PS：我改-webkit-所以我在這裏可以運行它......