img - ¿Existe una propiedad de transición animable para filtros css?

filtros html5

Question

Intento animar filtros CSS pero no puedo encontrar información sobre las propiedades de transición correctas. ¿Qué son?

Aquí hay un ejemplo: http://jsbin.com/onijim/3/

Answer 1

En las últimas versiones de Chrome que admiten la transition sin el prefijo -webkit- , si está utilizando transition-property (sin transition taquigrafía) y propiedades como el filter que aún necesita el prefijo -webkit- , debe mezclar el código prefijado y no prefijado:

transition-property: width, left, transform, box-shadow, filter, -webkit-filter;

Tenga en cuenta que la propiedad del filter se repite con -webkit-filter . Esto es necesario para los navegadores que no usan el prefijo, como Firefox, que en ese caso se -webkit-filter .

Answer 2

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;

Answer 3

-webkit-transition : -webkit-filter 500ms linear

funciona en webkit No sé sobre el soporte de filtros en FF u Opera.

No estoy seguro de entender completamente tu pregunta.