animation css 透明度逐渐_css3动画硬闪烁(帧之间没有淡入淡出)

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

.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);

}

编辑：

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

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

@-webkit-keyframes flash {

0% {

opacity: 1;

}

33% {

opacity: 0;

}

100% {

opacity: 0;

}

}

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