如何获得一个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-所以我在这里可以运行它......