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

CSS Animation Timing Function with steps() to try to blink colors, but colors are blending

我一直在尝试使两种颜色闪烁,使用以下 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>

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