如何使用关键帧在没有过渡（没有淡入淡出）的情况​​下突然改变不透明度

Question

我正在制作一个动画，我需要一个接一个地改变水平对齐图标（从0到1）的不透明度（它应该看起来像是一系列LED的逐渐亮起）。我使用@keyframes规则。但是由此我得到了从0到1的不透明度转换。我希望不透明度突然改变。如何仅使用没有不透明度过渡效果的CSS来完成这项工作？

HTML：

<core-icon style="height:20px;width:20px" id="two" class="icons" src=icons/somelogo.png></core-icon>
<core-icon style="height:20px;width:20px" id="three" class="icons" src=icons/somelogo.png></core-icon>
<core-icon style="height:20px;width:20px" id="four" class="icons" src=icons/somelogo.png></core-icon>
<core-icon style="height:20px;width:20px" id="five" class="icons" src=icons/somelogo.png></core-icon>
<core-icon style="height:20px;width:20px" id="six" class="icons" src=icons/somelogo.png></core-icon>

CSS：

@-webkit-keyframes two {
    20% {
        opacity:1;
    }
}
@-webkit-keyframes three {
    40% {
        opacity:1;
    }
}
@-webkit-keyframes four {
    60% {
        opacity:1;
    }
}
@-webkit-keyframes five {
    80% {
        opacity:1;
    }
}
@-webkit-keyframes six {
    100% {
        opacity:1;
    }
}
.icons {
    opacity: 0;
}
#two {
    -webkit-animation:two linear 4s;
    -webkit-animation-iteration-count: 15;
}
#three {
    -webkit-animation:three linear 4s ;
    -webkit-animation-iteration-count: 15;
}
#four {
    -webkit-animation:four linear 4s ;
    -webkit-animation-iteration-count: 15;
}
#five {
    -webkit-animation:five linear 4s ;
    -webkit-animation-iteration-count: 15;
}
#six {
    -webkit-animation:six linear 4s ;
    -webkit-animation-iteration-count: 15;
}

Answer 1

animation-timing-function可以设置为steps(1, end)。请参阅w3c spec（动画和过渡时相同）

Answer 2

可能有一种更有效或更聪明的方法，但是为了快速解决问题，您可以尝试在您想要显示图标之前以百分比将不透明度设为0：

@-webkit-keyframes two {
    19% {
        opacity:0;
    }
    20%, 100% {
        opacity:1;
    }
}
@-webkit-keyframes three {
    39% {
        opacity:0;
    }
    40%, 100% {
        opacity:1;
    }
}
etc...

我还添加了100％，以确保它们保持在opacity: 1直到结束。

实施例： http://jsfiddle.net/lee_gladding/mq71zoyL/