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

CSS3动画：闪烁覆盖框

2 个答案: