CSS3アニメーション：点滅オーバーレイボックス

Question

position：absoluteを使用してページの一部をオーバーレイする要素を作成したいとします。この要素は50％不透明で、赤と透明の間で点滅します。ダイアログのデフォルトのボタンのためにOSXが使用するもの（使用？）のようなビット。

CSS3で無限アニメーションループを作成する方法は？

このループで2つの背景色を切り替える方法はありますか？

今日、CSS3アニメーションでサポートされるブラウザはどれですか？

jQueryアニメーションは代わりですが、私はCSS3アプローチを最初に試してみたいです。

Answer 1

最初の2つの質問には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とAを経由して検出JavaScriptのフォールバック。

ここにはWebkitで動作し、少なくともいくつかの要件を満たすexampleがあります。注：私はあなたが参照した効果の詳細がわからなかったので、私は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の&クローム）のサポートCSS-アニメーション。