CSS3初始淡入淡出动画逐渐淡化为白色

Ontje

我想使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS3初始淡入淡出动画逐渐淡化为白色

来自分类Dev

带有css3转换的角度淡入淡出动画

来自分类Dev

CSS Sprite淡入淡出动画

来自分类Dev

淡入淡出动画

来自分类Dev

如何使用jquery和css3在手机上实现* SMOOTH *淡入淡出动画?

来自分类Dev

淡入淡出加载CSS3动画的最佳方法

来自分类Dev

CSS淡入淡出动画延迟时间

来自分类Dev

Android图像淡入淡出动画

来自分类Dev

延迟盒子淡入淡出动画

来自分类Dev

NSVisualEffectView 淡入淡出动画

来自分类Dev

jQuery 减慢淡入淡出动画

来自分类Dev

如何在 TextField 上创建背景颜色从白色变为青色的淡入淡出动画?

来自分类Dev

启动画面淡入淡出动画问题

来自分类Dev

CSS正方形到圆圈淡入淡出动画

来自分类Dev

仅使用HTML和CSS将文本元素替换为淡入淡出动画

来自分类Dev

如何使用纯JavaScript和CSS在动态更改文本中添加淡入淡出动画?

来自分类Dev

CSS正方形到圆圈淡入淡出动画

来自分类Dev

SKLabelNode的淡入淡出动画更改文本

来自分类Dev

如何减慢jQuery的淡入淡出动画?

来自分类Dev

SwiftUI-使用淡入淡出动画更改文本

来自分类Dev

图像上的无限淡入淡出动画

来自分类Dev

Visual Studio Blend中的淡入淡出动画

来自分类Dev

SKLabelNode的淡入淡出动画更改文本

来自分类Dev

加载淡入淡出动画未显示

来自分类Dev

jQuery 淡入淡出动画显示数据

来自分类Dev

如何停止textview的淡入淡出动画?

来自分类Dev

延迟无限淡入和淡出CSS3动画

来自分类Dev

在滚动div上逐渐淡入淡出

来自分类Dev

具有淡入淡出动画的“ pushViewController:animated:”(仅限动画过渡)?