css3动画硬闪烁（帧间无褪色）

试图用css3动画连续闪烁三个元素。我已经运行了，但每帧都有淡入淡出，我想删除它。理想情况下，每个元素保持可见1秒，然后立即隐藏。css3动画硬闪烁（帧间无褪色）

我试过在0%和99%为opacity:1和100%为opacity: 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; 
     } 
    }

来源

2013-03-18 technopeasant

使用适当的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秒。

来源

2013-03-18 03:40:01 Passerby

感谢您的回答！了解你对填充模式和方向的看法，但看到一个步骤问题。按照你的小提琴，动画绝对有三个阶段，但它变得越来越黑暗。相反，它应该闪烁稳定的红色，绿色，蓝色而不会消失或失去亮度。如果我注释掉计时功能，它在闪烁每种颜色时效果会更好，但我希望避免100％到0的不透明度褪色。有什么想法吗？ – technopeasant 2013-03-18 03:49:44

@technopeasant糟糕，我的错误。我已经更新了我的答案，请检查！ – Passerby 2013-03-18 04:02:27

只需定义您的动画，使它尽可能保持一个状态，然后尽可能快地切换到另一个状态。像这样：

@-webkit-keyframes flash { 
     0% { opacity: 1; } 
    49% { opacity: 1; } 
    50% { opacity: 0; } 
    100% { opacity: 0; } 
}

来源

2015-01-27 13:18:20 mbirth

这绝对应该是答案。 – skolind 2017-08-10 19:26:02

您可以保持最长时间的不透明度并快速更改。

试试这个：

.div 
    animation: blink 1s linear infinite 

@keyframes blink 
    0%,50% 
    opacity: 0 
    51%,100% 
    opacity: 1

来源

2016-06-18 04:05:09

css3动画硬闪烁（帧间无褪色）

回答

相关问题