63

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/

1
  • 1
    It should be the same property name, no? Make sure you're matching the prefixes properly as well.
    – BoltClock
    Aug 30, 2012 at 9:53

4 Answers 4

79
-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.

4
  • 1
    You understood it correctly. Apparently the transition-property only works with prefixes as of this writing, thank you.
    – 0skar
    Aug 30, 2012 at 10:42
  • If I transition -webkit-filter, it animates fine, but after the animation the DIV appears empty. I'm just applying a blur of 5px to the div.
    – CJT3
    Jun 20, 2014 at 13:06
  • Apparently I'm getting a rendering glitch because it only breaks when the div containing the blur div has a left position set that is transitioned, but when the left is 0px the blur div no longer vanishes (or if I blur it, then change the left position of the container it still shows). Wish they would work out these kinks!
    – CJT3
    Jun 20, 2014 at 13:12
  • the blurred div also doesn't update while blurred if I make content changes via javascript or if the user clicks on a blurred button. After these changes are made, and I remove the blur then there are blur artifacts!
    – CJT3
    Jun 20, 2014 at 13:14
34

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;
1
  • 2
    As @AxeEffect mentionned in his comment, for latest Chrome support, you should add the -webkit-filter property to the unprefixed transition, like transition: 1s filter linear, 1s -webkit-filter linear;
    – Thomas Leu
    Jun 27, 2016 at 10:02
6

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.

5

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%);
}
2
  • 1
    In my case, filter transition didn't work when applying/removing a grayscale(100%) filter. Swapping between grayscale(100%) and grayscale(0%) worked.
    – Pezzer
    Feb 21, 2022 at 17:14
  • 1
    This raises a really good point and should be higher voted, ensuring that your filter properties both before and after exist (even if the before value is 0%) will animate the filter property accordingly
    – Harrison
    Feb 3 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.