使用步骤闪烁 CSS3 彩色动画无法按预期工作

Question

我有像这样的闪烁光标的 css3 动画：

.cmd {
    font-family: FreeMono, monospace;
    color: #aaa;
    background-color: #000;
    font-size: 12px;
    line-height: 14px;
}
.cmd .cursor {
    animation: blink 1s infinite steps(2, start);
}
@keyframes blink {
    to {
        background-color: #000;
        color: #fff;
    }
}

我需要对颜色进行动画处理，因为我想在光标内显示字母。

如果我使用steps(2, end)它不是完全黑色的，如果我使用steps(2, start)它不是完全白色的。我该如何解决它？

这里是 jsbin

Answer 1

这应该可以工作 JSBIN

.cmd .cursor {
    -webkit-animation: blink 1s infinite steps(1, start);
}
@-webkit-keyframes blink {
  0%,100%{
        background-color: #000;
        color: #aaa;
  }
  50% {
        background-color: #fff;
        color: #aaa;
    }
}

Answer 2

我认为解决方案是在时间步长到达之前完成动画

animation: blink 1s infinite steps(1, end)

。

keyframes blink {
    30% {
        background-color: #000;
        color: #aaa;
    }
}

http://jsbin.com/zodib/12/edit您可以使用百分比+步数来获得您想要的时间