I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they?
Here's an example: http://jsbin.com/onijim/3/
I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they?
Here's an example: http://jsbin.com/onijim/3/
-webkit-transition : -webkit-filter 500ms linear
works in webkit. I don't know about filter support in FF or Opera.
I'm not sure I wholly understand your question.
That's what I'm using. For Mozilla the 2nd is working for me, but in my sources I found it with the -moz- prefix, so it doesn't hurt to keep both.
-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;
-webkit-filter
property to the unprefixed transition
, like transition: 1s filter linear, 1s -webkit-filter linear;
Jun 27, 2016 at 10:02
On last versions of Chrome which support transition
without -webkit-
prefix, if you are using transition-property
(no shorthand transition
) and properties like filter
which still needs -webkit-
prefix you need to mix unprefixed and prefixed code:
transition-property: width, left, transform, box-shadow, filter, -webkit-filter;
Note that the filter
property is repeted with -webkit-filter
. This is needed for browsers which do not use prefix, like Firefox, which in that case -webkit-filter
is ignored.
Check if you have different values in the filter properties:
WRONG
.link-image {
transition: 0.3s;
filter: brightness(80%);
}
.link-image:hover {
transition: 0.3s;
filter: brightness(10);
}
CORRECT
.link-image {
transition: 0.3s;
filter: brightness(80%);
}
.link-image:hover {
transition: 0.3s;
filter: brightness(100%);
}
grayscale(100%)
filter. Swapping between grayscale(100%)
and grayscale(0%)
worked.
0%
) will animate the filter
property accordingly