带有 steps() 的 CSS 动画计时函数尝试闪烁颜色，但颜色正在混合

Question

我一直在尝试使用以下 CSS 规则使两种颜色闪烁，但颜色最终混合在一起。

这是 jsfiddle:http://jsfiddle.net/1kyba3rd/

这是 CSS 规则:

<style>
    .block {
        width: 100px;
        height: 100px;
        border: 1px solid black;

        /* Chrome, Safari, Opera */
        -webkit-animation-name: flash-colors; 
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: steps(2, start);
        -webkit-animation-iteration-count: infinite;
        /* Standard Syntax */
        animation-name: flash-colors;
        animation-duration: 1s;
        animation-timing-function: steps(2, start);
        animation-iteration-count: infinite;
    }
    /* Chrome, Safari, Opera */
    @-webkit-keyframes flash-colors {
        0% {
            background-color: white;
        }
        100% {
            background-color: yellow;
        }
    }
    /* Standard syntax */
    @keyframes flash-colors {
        0% {
            background-color: white;
        }
        100% {
            background-color: yellow;
        }
    }
</style>

Answer 1

闪烁无法正常工作，因为您在动画结束时设置了 background-color:yellow (100%) 并且 background-color:white 在一开始，将第一个设置为 50% 以便动画按预期工作 - demo