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

Question

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

我试过设置与帧动画0%并99%为opacity:1与100%对opacity: 0,但仍然没有运气.

我希望有一种方法可以消除褪色!

webkit js小提琴

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; }
}

Answer 2

使用正确animation-timing-function:

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文件 fill-mode

MDN文件 direction

关于steps()计时功能的MDN文件

编辑:

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

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

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

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

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