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

试图用 css3动画连续闪现三个元素.我已经运行了,但每帧都有淡入淡出,我想将其删除.理想情况下,每个元素保持可见1秒,然后立即隐藏.

我尝试用0％和99％的帧设置不透明度的动画：1和100％的不透明度：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;
        }
    }

解决方法

使用适当的动画定时功能：

http://jsfiddle.net/rfGDD/1/(仅限WebKit)

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal; /* not "linear" */
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:steps(3,end);
}

MDN document on fill-mode

MDN document on direction

MDN document on steps() timing function

编辑：

哎呀,刚刚意识到了逻辑上的缺陷.

修订：http://jsfiddle.net/rfGDD/3/(仅限WebKit)

除上述更改外,将flash动画更改为以下内容：

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

问题是,动画播放3秒,但每个元素需要保持在不透明度：0状态后第二个#1,所以我需要将动画分成2个阶段(时间长度比为1：2),所以元素看起来他们会在最后阶段停留2秒钟.