Las transiciones CSS3 quieren agregar un color y desvanecerlo

Quiero hacer que un fondo DIV (que no tiene un color de fondo) parpadee en rojo y luego vuelva a dejarlo en blanco. ahora he usado JS para agregar una nueva CLASE (que agrega el rojo) a la DIV en cuestión y CSS3 para agregar una relajación al color de fondo. pero lo facilita, lo que quiero es que se ponga ROJO y luego se alivie. Creo que podría hacer esto usando JS para agregar múltiples CLasss después de un retraso. pero, ¿se puede usar CSS3 para hacer esto por completo?Las transiciones CSS3 quieren agregar un color y desvanecerlo

Fuente

2012-04-09 Purplemonkey

Si desea algo así como un resaltado, es posible que desee utilizar animaciones CSS3. No son compatibles con navegadores más antiguos. Compruebe caniuse para esto.

He creado un pequeño ejemplo over here.

Se llama al resaltado al hacer clic en el enlace. Aquí está el CSS (sin prefijos de proveedor):

@keyframes highlight { 
    0% { 
    background: red 
    } 
    100% { 
    background: none; 
    } 
} 

#highlight:target { 
    animation: highlight 1s; 
}

Fuente

2012-04-09 12:40:10 drublic

gracias por el ejemplo, pero estoy buscando para hacer este efecto sin que el usuario haga clic. En la carga de la página busco entradas DOM específicas y luego agrego una clase. Cuando se agrega esa clase, quiero que destelle en rojo y se vuelva a fundir en nada? – Purplemonkey

¡Impresionante! Le atiné. gracias por el puntero a las animaciones, esa fue la clave. El único paso que estaba fallando en su ejemplo eran los detalles de MOZ (no estoy seguro de cómo funcionaba su página de ejemplo). ordenados ahora gracias. – Purplemonkey

El ejemplo funciona con prefix-free: http://leaverou.github.com/prefixfree/ – drublic

Una forma de hacerlo es utilizar el método de animación jQuery UI, que amplía la jQuery animate() "normal" para afectar aspectos como el color de fondo.

Es posible realizar transiciones como esta en css3 a, pero obviamente con una compatibilidad no tan amplia con el navegador.

#maDiv { 
    -webkit-transition:background-color 0.5s linear; 
    -moz-transition: background-color 0.5s linear; 
    -o-transition: background-color 0.5s linear; 
    height: 20px; 
    width: 20px; 
    background:#000; 
} 

#maDiv:hover { 
    background: #ff0; 
}

que se desvanecerá el color cuando el usuario pasa el Div, y se descolora de nuevo cuando el ratón está fuera, durante 0,5 segundos. Para obtener información sobre el soporte del navegador, consulte "transición css3" aquí: http://www.html5rocks.com/en/features/presentation

Fuente

2012-04-09 12:30:07

Las transiciones CSS3 quieren agregar un color y desvanecerlo

Respuesta

Cuestiones relacionadas