试图用
css3动画连续闪现三个元素.我已经运行了,但每帧都有淡入淡出,我想将其删除.理想情况下,每个元素保持可见1秒,然后立即隐藏.
我尝试用0％和99％的帧设置不透明度的动画：1和100％的不透明度：0但仍然没有运气.
我希望有一种方法可以消除褪色！
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 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秒钟.
