CSS3 Animation: Flashing Overlay Block

Question

I would like to create an element that overlays part of the page using the position: absolute. This item will be 50% opaque and blinks between red and transparent. A bit like OSX uses (is it used?) For the default button for the dialog.

How to create an endless loop of animation using CSS3?

How to move between two background colors in this loop?

What browsers can I support today through CSS3 animations?

jQuery animation is an alternative, but I would like to try CSS3 first.

Answer 1

The first 2 questions are answered by the specification .

In the loop: animation-iteration-count: infinite;

And the cyclical background color includes the @keyframes rule @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; } 

(do not forget about the applicable vendor prefixes!)

As for browser support, I can’t tell you the specifics, but in any case, I would recommend detecting the function through modernizr and javascript reserve.

Here is an example that works in webkit and fulfills at least some of your requirements. NOTE. I do not use mac, so I was not sure about the specifics of the effect you were referring to.

Answer 2

Once you have adjusted the animation in the stylesheet (-webkit-transition :), you can just change the color using 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); }); } 

Currently, only Webkit browsers (Safari and Chrome) support CSS animation.