css3 动画硬闪烁(帧之间没有淡入淡出)
Posted
技术标签:
【中文标题】css3 动画硬闪烁(帧之间没有淡入淡出)【英文标题】:css3 animations hard blink (no fade inbetween frames) 【发布时间】:2013-03-06 07:54:51 【问题描述】:尝试使用 css3 动画连续闪烁三个元素。我已经让它运行了,但是每一帧都有一个淡入淡出,我想删除它。理想情况下,每个元素保持可见 1 秒,然后立即隐藏。
我尝试将动画的帧设置为 0%
和 99%
为 opacity:1
和 100%
为 opacity: 0
但仍然没有运气。
我希望有办法消除褪色!
webkit js fiddle
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;
【问题讨论】:
【参考方案1】:只需定义您的动画,使其尽可能长时间地保持一种状态,然后尽快切换到另一种状态。像这样:
@-webkit-keyframes flash
0% opacity: 1;
49% opacity: 1;
50% opacity: 0;
100% opacity: 0;
【讨论】:
这绝对是答案。【参考方案2】:使用正确的animation-timing-function
:
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 fill-mode
MDN document on direction
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 秒,但是每个元素需要在第 1 秒之后保持在opacity:0
状态,所以我需要将动画分成 2 个阶段(时间长度比为 1:2) ,因此元素看起来像是在最后阶段停留了 2 秒。
【讨论】:
感谢您的回答!了解您所说的有关填充模式和方向的内容,但看到步骤的问题。根据你的小提琴,动画肯定有三个阶段,但它只是越来越暗。相反,它应该闪烁稳定的红色、绿色、蓝色,而不会褪色或失去亮度。如果我注释掉计时功能,它在简单地闪烁每种颜色时会更好,但我希望避免 100% 到 0 的不透明度褪色。有什么想法吗? @technopeasant 哎呀,我的错误。我已经更新了我的答案,请检查!【参考方案3】:您可以在最长时间内保持不透明度并快速更改它。
试试这个:
.blinkMe
animation: blink 1s linear infinite;
@keyframes blink
0%,50%
opacity: 0;
51%,100%
opacity: 1;
【讨论】:
以上是关于css3 动画硬闪烁(帧之间没有淡入淡出)的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Droplr 上使用 CSS/jQuery 淡入/淡出多个文本?
css CSS关键帧在转换和动画syntax.css中淡入淡出