CSS3動畫：閃爍覆蓋框

Question

我想創建一個元素，使用position：absolute覆蓋頁面的一部分。這個元素將是50％不透明，並在紅色和透明之間閃爍。有點像OSX使用（用於？）爲對話框的默認按鈕做的事情。

如何使用CSS3創建無限動畫循環？

如何在這個循環中循環兩種背景顏色？

今天通過CSS3動畫可以支持哪些瀏覽器？

jQuery動畫是一種替代方法，但我想先嚐試CSS3方法。

Answer 1

前兩個問題由spec回答。

要循環：animation-iteration-count: infinite;

和騎自行車的背景顏色包括指定@keyframes規則。

body { background: #0ff; } 

@-webkit-keyframes blink { 
    0% { background: rgba(255,0,0,0.5); } 
    50% { background: rgba(255,0,0,0); } 
    100% { background: rgba(255,0,0,0.5); } 
} 

@keyframes blink { 
    0% { background: rgba(255,0,0,0.5); } 
    50% { background: rgba(255,0,0,0); } 
    100% { background: rgba(255,0,0,0.5); } 
} 

#animate { 
    height: 100px; 
    width: 100px; 
    background: rgba(255,0,0,1); 
} 

#animate { 
    -webkit-animation-direction: normal; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-name: blink; 
    -webkit-animation-timing-function: ease; 

    animation-direction: normal; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
    animation-name: blink; 
    animation-timing-function: ease;  
} 

（不要忘記任何適用的供應商前綴！）

至於瀏覽器支持得好，我不能告訴你具體細節，但在任何情況下，我會建議通過功能和modernizr一個檢測javascript後備。

這是一個example在webkit中工作，至少滿足您的一些要求。注：我不使用一個mac，所以我不確定你引用的效果的細節。

Answer 2

在樣式表（-webkit-transition :)中設置了動畫後，您可以簡單地使用JavaScript更改顏色。

function toggleColor(element) 
{ 
    var red = "rgba(255,0,0,0.5)"; 
    var transparent = "rgba(255,0,0,0)"; 
    element.style.backgroundColor = ((element.style.backgroundColor == red) ? transparent : red); 
    window.setTimeout(function() 
    { 
     toggleColor(element); 
    }); 
} 

目前，只有WebKit瀏覽器（Safari瀏覽器Chrome的&）支持CSS的動畫。