使用CSS3可以使两个文本在随机时间内闪烁吗？

Question

是否可以让两个文本在随机时间内闪烁？他们不应该一起眨眼，但他们应该在不同的阶段眨眼。我试图通过使用正常text-decoration:blink，但没有用。然后，我尝试使用jQuery淡入淡出文本有一些延迟，但我希望有一些简单的方法在CSS3中做到这一点。

Answer 1

对此，您可以使用CSS @keyframes和animation。从你的问题来看，你是否想要不同的眨眼率（下面的例子），或者同样的速度，只是不同步。如果您希望同步速率不同步，请使用animation-delay在其中一个之后启动其中一个。

演示：http://jsfiddle.net/ThinkingStiff/SYGpy/

HTML：

<div id="fast">fast</div> 
<div id="regular">regular</div> 
<div id="slow">slow</div> 

CSS：

#fast { 
    animation:    blink 300ms linear infinite; 
     -moz-animation: blink 300ms linear infinite; 
     -webkit-animation: blink 300ms linear infinite; 
} 

#regular { 
    animation:    blink 750ms linear infinite; 
     -moz-animation: blink 750ms linear infinite; 
     -webkit-animation: blink 750ms linear infinite; 
} 

#slow { 
    animation:    blink 1500ms linear infinite; 
     -moz-animation: blink 1500ms linear infinite; 
     -webkit-animation: blink 1500ms linear infinite; 
} 

@keyframes    blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } 
    @-moz-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } 
    @-webkit-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }