css3 动画硬闪烁(帧之间没有淡入淡出)

Question

尝试使用 css3 动画连续闪烁三个元素。我已经让它运行了，但是每一帧都有一个淡入淡出，我想删除它。理想情况下，每个元素保持可见 1 秒，然后立即隐藏。

我已经尝试将动画的帧设置为 0% 和 99%，opacity:1 和 100% 为 opacity: 0 但仍然没有运气。

我希望有办法消除褪色!

webkit js fiddle

CSS:

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
}
    .frame:nth-of-type(2) {
        -webkit-animation-delay: 1s;
    }
    .frame:nth-of-type(3) {
        -webkit-animation-delay: 2s;
    }

    @-webkit-keyframes flash {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

Answer 1

只需定义您的动画，使其尽可能长时间地保持一种状态，然后尽可能快地切换到另一种状态。像这样:

@-webkit-keyframes flash {
      0% { opacity: 1; }
     49% { opacity: 1; }
     50% { opacity: 0; }
    100% { opacity: 0; }
}