CSS3动画：硬闪烁（帧之间没有淡入淡出）

Question

尝试使用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;
        }
    }

- technopeasant

Answer 1

只需定义动画，使其尽可能长时间保持一个状态，然后尽快切换到另一个状态。像这样：

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

- mbirth

---

这肯定是答案。 - skolind

Answer 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关于fill-mode的文档

MDN关于direction的文档

MDN关于steps()计时函数的文档

编辑:

哎呀，刚才发现逻辑上的错误。

改进后: http://jsfiddle.net/rfGDD/3/ (仅限WebKit)

除了以上更改，将flash动画更改为以下内容:

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

问题在于，动画播放了3秒，但每个元素需要在第1秒后保持opacity:0状态，因此我需要将动画分为两个阶段（时序长度比为1：2），这样元素看起来就像在最终阶段停留了2秒钟。

- Passerby

---

谢谢你的回答！我理解你关于fill-mode和direction的说法，但是我在步骤上遇到了问题。根据你的fiddle，动画肯定有三个阶段，但它只是越来越暗。相反，它应该是红色、绿色、蓝色的闪光，不会褪色或失去亮度。如果我注释掉时间函数，它会更好地闪烁每种颜色，但是它有100%到0不透明度的淡出效果，这是我想要避免的。你有什么想法吗？ - technopeasant

@technopeasant 抱歉，是我的错误。我已经更新了我的回答，请检查一下！ - Passerby

Answer 3

你可以在最长的时间内保持不透明度，然后快速地改变它。

试一下这个：

.blinkMe {
  animation: blink 1s linear infinite;
}

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

- Kande Bonfim