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
Respuesta
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;
}
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
- 1. activar/desactivar heredados transiciones CSS3
- 2. Diferencia entre las transiciones CSS3 de entrada y salida
- 3. CSS3 Transiciones con Javascript Fallback
- 4. Recreación de transiciones CSS3 Curva cúbica-Bezier
- 5. Modernizr y jQuery para animar si CSS3 transiciones no existen
- 6. Transiciones de CSS3 a elementos creados dinámicamente
- 7. Transiciones de CSS3 dentro de jQuery .css()
- 8. Retraso mouseout/hover con transiciones CSS3
- 9. VisualStateManager y las transiciones generadas
- 10. Cuando las clases quieren acoplar
- 11. Transiciones CSS3 en pseudo-elementos (: después,: antes) ¿no funciona?
- 12. ¿Puedo desactivar temporalmente todas las transiciones/animaciones de CSS3 mientras se crea un elemento?
- 13. Desactive las transiciones CSS3 de Bootstrap en las barras de progreso
- 14. ¿qué es más rápido? ¿Transiciones CSS3 o animaciones jQuery?
- 15. jQuery Mobile CSS3 Transiciones de página sin jQuery Mobile Library
- 16. Color de borde animado CSS3
- 17. ¿Cómo se determina la dirección de rotación en las transiciones CSS3?
- 18. Agregar canal alfa a un color determinado
- 19. Transiciones CSS3: cómo demorar el restablecimiento de la propiedad del índice Z?
- 20. CSS3, orden de transición de WebKit? ¿Cómo hacer cola para las transiciones?
- 21. Agregar transición CSS3 expand/collapse
- 22. Mezcla de lienzo y elementos CSS3
- 23. JQuery ¿Puedo visualizar el resultado y luego desvanecerlo?
- 24. css3 slideup slide
- 25. evento webkitTransitionEnd activado cuando las transiciones finalizan en las transiciones div Y finalizan en todos los divs CHILD? Todo
- 26. HTML5 swipe.js transiciones css3; representación fuera de la pantalla y el almacenamiento en caché de los elementos de la página
- 27. Transiciones de CSS, las animaciones tienen un rendimiento terrible, comportamiento
- 28. CSS3 transición unidireccional?
- 29. Agregar al azar a un bucle de animación css3
- 30. ¿Cómo funcionan las transiciones JQuery Nivo Slider?
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