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