css3 动画硬闪烁（帧之间没有淡入淡出）答案

【问题标题】：css3 animations hard blink (no fade inbetween frames)css3 动画硬闪烁（帧之间没有淡入淡出）
【发布时间】：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;
        }
    }

【问题讨论】：

标签： css animation opacity blink

【解决方案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;
  }
}

【讨论】：