que - Animación CSS3: cuadro de superposición parpadeante

parpadear div css

Question

Me gustaría crear un elemento que superponga una parte de una página usando position: absolute. Este elemento sería 50% opaco y parpadearía entre rojo y transparente. Un poco como lo que usa OSX (¿usado?) Para el botón predeterminado de un diálogo.

¿Cómo crear un ciclo de animación infinito con CSS3?

¿Cómo hacer un ciclo entre dos colores de fondo en este ciclo?

¿Qué navegadores son compatibles hoy con la animación CSS3?

La animación jQuery es una alternativa, pero me gustaría probar el enfoque CSS3 primero.

Answer 1

Una vez que haya configurado la animación en la hoja de estilo (-webkit-transition :), simplemente puede cambiar el color con 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);
    });
}

Actualmente, solo los navegadores Webkit (Safari y Chrome) admiten CSS-Animations.

Answer 2

Las primeras 2 preguntas son respondidas por la especificación .

Para bucle: animation-iteration-count: infinite;

Y @keyframes el color de fondo implica especificar una regla @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;       
}

(¡no olvide los prefijos de proveedor aplicables!)

En lo que respecta al soporte de navegador, no podría decirles detalles, pero en cualquier caso recomendaría feature detect a través de modernizr y un javascript de respaldo.

Aquí hay un ejemplo que funciona en webkit y cumple al menos algunos de sus requisitos. NOTA: No uso mac, así que no estaba seguro de las características específicas del efecto al que hizo referencia.