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的动画。