CSS3 анимация: мигающее окно наложения

Question

Я хотел бы создать элемент, который перекрывает часть страницы, используя position: absolute.Этот элемент будет на 50% непрозрачным и мигает между красным и прозрачным.Немного похоже на то, что OSX использует (использовал?) Для кнопки по умолчанию в диалоговом окне.

Как создать бесконечный цикл анимации с помощью CSS3?

Как переключаться между двумя цветами фона вэтот цикл?

Какие браузеры сегодня можно поддерживать с помощью анимации 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 и резервный javascript.

Вот пример , который работает в 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-анимации.