css3 动画硬闪烁(帧之间没有淡入淡出)

Posted

技术标签:

【中文标题】css3 动画硬闪烁(帧之间没有淡入淡出)【英文标题】:css3 animations hard blink (no fade inbetween frames) 【发布时间】:2013-03-06 07:54:51 【问题描述】:

尝试使用 css3 动画连续闪烁三个元素。我已经让它运行了,但是每一帧都有一个淡入淡出,我想删除它。理想情况下,每个元素保持可见 1 秒,然后立即隐藏。

我尝试将动画的帧设置为 0%99%opacity:1100%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 动画硬闪烁(帧之间没有淡入淡出)的主要内容,如果未能解决你的问题,请参考以下文章

如何控制两个 UIImage 的无动画之间的淡入淡出?

如何在 Droplr 上使用 CSS/jQuery 淡入/淡出多个文本?

CSS3 - 在精灵图像的“背景位置”之间淡入淡出

css CSS关键帧在转换和动画syntax.css中淡入淡出

css CSS关键帧在转换和动画syntax.css中淡入淡出

UIImageView 在动画之间淡入淡出