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) - 因此除初始状态（0％）外，您的动画只有一步（50％）。
将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-所以我可以在这里运行...

如何让CSS动画运行正确的步骤

1 个答案: