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 你可以玩百分比+步数，以获得你想要的时间

使用步骤闪烁CSS3颜色动画不能按预期工作

2 个答案: