我想使用CSS3设置交叉淡入淡出的背景,并按照http://css3.bradshawenterprises.com/cfimg/中的一些说明进行操作
我的动画看起来像:
@keyframes imageAnimation {
0% { opacity: 1; }
22% { opacity: 1; }
33% { opacity: 0; }
89% { opacity: 0; }
100% { opacity: 1; }
}
淡入淡出效果很好,但是问题是,第一个动画循环无法按预期工作。我设置了一个小jsfiddle示例来重现我的问题:https ://jsfiddle.net/5j7nrf7y/
如您所见,从红色开始的第一个循环逐渐淡化为白色,然后又跳跃为黄色。在第一个完整循环之后,交叉淡入淡出从红色到黄色都可以正常工作。
第一个动画循环有什么问题?
尝试将您的起始不透明度设置为1:
https://jsfiddle.net/5j7nrf7y/1/
.container > figure {
....
opacity:1;
....
}
我相信,因为它们最初从0开始,所以您会看到跳跃,因为它们在下一个动画开始之前就被隐藏了
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句