大佬教程收集整理的这篇文章主要介绍了css3动画硬闪烁(帧之间没有淡入淡出)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我尝试用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秒钟.
以上是大佬教程为你收集整理的css3动画硬闪烁(帧之间没有淡入淡出)全部内容，希望文章能够帮你解决css3动画硬闪烁(帧之间没有淡入淡出)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。