CSS动画计时函数使用steps()来尝试闪烁颜色，但颜色正在混合

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