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;
        }
    }

Answer 1

使用适当的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状态，所以我需要将动画分成两个阶段（时间长度比为1：2），因此元素可以看起来就像他们在最后阶段停留2秒钟一样。

Answer 2

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

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

Answer 3

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

试试这个：

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

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