CSS3动画：闪烁叠加框 [英] CSS3 animation: blinking overlay box

问题描述

我想创建一个覆盖使用位置的页面的一部分的元素：绝对的。此元素为50％不透明的红色和透明之间闪烁。喜欢使用什么样的OSX的位（用？）为一个对话框的默认按钮做的。

I'd like to create a element which overlays a part of a page using position: absolute. This element would be 50% opaque and blink between red and transparent. A bit like what OSX uses (used?) to do for the default button of a dialog.

如何创建一个CSS3动画无限循环？

How to create a infinite animation loop with CSS3?

如何在这个循环中两个后台颜色之间循环？

How to cycle between two background colours in this loop?

哪些浏览器可以支持通过今天CSS3动画？

Which browsers is possible support today through CSS3 animation?

jQuery的动画是一种选择，但我想先试试CSS3的方法。

jQuery animation is an alternative, but I'd like to try CSS3 approach first.

推荐答案

第2个问题是由的规范。

要循环：动画迭代计数：无限;

和骑自行车的背景色包括指定 @keyframes 规则。

And cycling the background color involves specifying a @keyframes rule.

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

（不要忘记任何适用的供应商prefixes！）

(don't forget any applicable vendor prefixes!)

至于浏览器支持的推移，我不能告诉你细节，但在任何情况下，我会建议通过功能检测Modernizr的以及一个javascript回退。

As far as browser support goes, i couldn't tell you specifics, but in any case i would recommend feature detect via modernizr and a javascript fallback.

下面是一个例如，在WebKit的作品，并至少满足你的一些要求。注意：我不使用Mac，所以我不知道你提到的影响的具体

Here is an example that works in webkit and fulfills at least some of your requirements. NOTE: I don't use a mac so i wasn't sure the specifics of the effect you referenced.

这篇关于CSS3动画：闪烁叠加框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！