CSS3动画：闪烁覆盖框

Question

我想创建一个使用position:absolute的元素，它会覆盖页面的一部分。这个元素将是50%的不透明度，并在红色和透明之间闪烁。有点像OSX用于对话框默认按钮的方式（使用？）。

如何使用CSS3创建无限动画循环？

如何在此循环中在两个背景颜色之间循环？

哪些浏览器可以通过CSS3动画进行支持？

jQuery动画是一种替代方案，但我想先尝试CSS3方法。

- Mikko Ohtamaa

Answer 1

前两个问题的答案可以在规范中找到。

要循环播放： 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备用方案。

这里有一个示例在WebKit中起作用并满足您的一些要求。注意：我不使用Mac，因此我不确定您提到的效果具体是什么。

- David Wick

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

- Christian Schnorr

---

Internet Explorer 10与CSS3动画和关键帧完美兼容 :-) - juFo