如何使用CSS 3制作闪烁的文本 [英] How to make blinking/flashing text with CSS 3

问题描述

当前，我有以下代码:

@-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出现，然后再次淡出，再次出现，依此类推...

It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back with opacity: 1.0, then again fades out, appears again, and so on...

我希望它淡出，然后从此淡入提升"再次回到opacity: 1.0.有可能吗?

I would like it to fade out, and then "raise" from this fade back again to opacity: 1.0. Is that possible?

推荐答案

您首先要设置opacity: 1;，然后在0上结束它，所以它从0%开始并在100%结束，所以而是只需将50%的不透明度设置为0，其余的将自行处理.

You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself.

演示

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

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

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

Here, I am setting the animation duration to be 1 second, and then I am setting the timing to linear. That means it will be constant throughout. Last, I am using infinite. That means it will go on and on.

注意:如果这不适用于您，请使用浏览器前缀，例如 -webkit，-moz等，对于animation和 @keyframes.您可以参考我的详细代码 此处

Note: If this doesn't work for you, use browser prefixes like -webkit, -moz and so on as required for animation and @keyframes. You can refer to my detailed code here

---

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

---

As commented, this won't work on older versions of Internet Explorer, and for that you need to use jQuery or JavaScript...

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

^{感谢Alnitak建议 a更好的方法.}

演示 (使用jQuery的闪烁器)

这篇关于如何使用CSS 3制作闪烁的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！