如何使css3闪烁/闪烁文本？ [英] How to make blinking/flashing text with css3?

问题描述

目前，我有以下代码：

@-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 。

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... 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 than 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 rest will take care of iteself.

演示

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

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

这里，设置动画持续时间应为 1第二，而不是将 timing 设置为 linear

Here, am setting animation duration should be 1 second, than am setting the timing to linear that means it will be constant throughout, and last am using infinite that means it will go on and on.

注意：无限 ：如果这不适用于您，请使用浏览器前缀，如
-webkit ， -moz 依照动画和
@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, for that, you need to use jQuery or JavaScript....

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

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

演示 （Blinker使用jQuery）

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