Estoy intentando animar filtros CSS pero no puedo encontrar ninguna información sobre las propiedades de transición correctas. ¿Qué son?¿Existe una propiedad de transición animable para filtros css?
He aquí un ejemplo: http://jsbin.com/onijim/3/
-webkit-transition : -webkit-filter 500ms linear
obras en WebKit. No sé sobre el soporte de filtros en FF u Opera.
No estoy seguro de entender por completo su pregunta.
Lo entendiste correctamente. Aparentemente la propiedad de transición solo funciona con prefijos al momento de escribir esto, gracias. – donleche
Si hago la transición -webkit-filter, se anima bien, pero después de la animación, el DIV aparece vacío. Solo estoy aplicando un desenfoque de 5px al div. –
Aparentemente tengo un error de renderizado porque solo se rompe cuando el div que contiene el elemento de desenfoque div tiene un conjunto de posición de izquierda que se transiciona, pero cuando el izquierdo es 0px el elemento de desenfoque div ya no desaparece (o si lo desenfoque, entonces cambie la posición izquierda del contenedor aún se muestra). ¡Ojalá resolvieran estos problemas! –
Eso es lo que estoy usando. Para Mozilla, el segundo me funciona, pero en mis fuentes lo encontré con el prefijo -moz-, así que no hace daño mantener ambos.
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;
Como @AxeEffect mencionó en su comentario, para la última compatibilidad con Chrome, debe agregar la propiedad '-webkit-filter' a la' transición' no prefijada, como 'transition: 1s filter linear, 1s -webkit-filter linear;' –
En últimas versiones de Chrome que apoyan transition sin -webkit- prefijo, si está utilizando transition-property (sin abreviada transition) y propiedades como filter que todavía necesita -webkit- prefijo que necesita mezclar sin prefijo y el prefijo de código:
transition-property: width, left, transform, box-shadow, filter, -webkit-filter;
Tenga en cuenta que la propiedad filter se repite con -webkit-filter. Esto es necesario para los navegadores que no usan el prefijo, como Firefox, que en ese caso -webkit-filter se ignora.
Debe ser el mismo nombre de propiedad, ¿no? Asegúrate de que también estás haciendo coincidir correctamente los prefijos. – BoltClock