Animacja CSS3: migające pole nakładki

Question

Chciałbym utworzyć element, który nakłada się na część strony za pomocą position: absolute. Ten element byłby w 50% nieprzezroczysty i migałby między czerwonym i przezroczystym. Trochę jak to, czego używa OSX (używane?) W domyślnym przycisku okna dialogowego.

Jak utworzyć nieskończoną pętlę animacji z CSS3?

Jak przełączać między dwoma kolorami tła w tej pętli?

Które z przeglądarek obsługuje dziś CSS3?

Animacja jQuery jest alternatywą, ale chciałbym najpierw spróbować podejścia CSS3.

Answer 1

Na pierwsze 2 pytania odpowiada spec.

Do pętli: animation-iteration-count: infinite;

i rowerowych kolor tła obejmuje określenie @keyframes regułę.

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

(nie zapomnij wszelkie obowiązujące prefiksy sprzedawca!)

Jeśli chodzi o wsparcie przeglądarka idzie, nie mogłem powiedzieć o szczegółach, ale w każdym razie polecam funkcja wykrywania poprzez modernizr oraz Zastąpienie javascript.

Oto example, który działa w webkit i spełnia przynajmniej niektóre z Twoich wymagań. UWAGA: Nie używam komputera Mac, więc nie byłem pewien, jaki jest efekt działania, do którego się odwołałeś.

Answer 2

Po ustawieniu animacji w arkuszu stylów (-webkit-transition :) można po prostu zmienić kolor za pomocą 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); 
    }); 
} 

Obecnie tylko przeglądarka Webkit (Safari & Chrome) wsparcie CSS-animacje.