如何使用CSS 3制作闪烁的文本

Question

目前，我有以下代码：

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

它闪烁，但仅在“一个方向”闪烁。我的意思是，它只会淡出，然后以出现opacity: 1.0，然后再次淡出，再次出现，依此类推…

我希望它逐渐消失，然后从此渐隐“提升”到opacity: 1.0。那可能吗？

Answer 1

首先设置opacity: 1;，然后在上结束0，所以它从始于，在0%结束100%，因此只需将opacity设置为0at
50%，其余的将自己处理。

.blink_me {

  animation: blinker 1s linear infinite;

}



@keyframes blinker {

  50% {

    opacity: 0;

  }

}


<div class="blink_me">BLINK ME</div>

在这里，我将动画持续时间设置为1second，然后将设置timing为linear。这意味着它将始终保持不变。最后，我正在使用infinite。这意味着它将继续下去。

注：如果这不会为你工作，使用浏览器前缀喜欢 -webkit，-moz等按要求animation和 @keyframes。

如前所述，这不适用于较旧版本的Internet Explorer，因此您需要使用jQuery或JavaScript …

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();