CSS 3 filter (blur) not using transition duration

Question

I found this neat technique for cross-browser blurring. But it didn't look like the transition was having an effect, so I forked it and set the transition time and blur amount way up, and sure enough it's happening instantly.

img.blur {
-webkit-filter: blur(30px); -moz-filter: blur(30px);
-o-filter: blur(30px); -ms-filter: blur(30px); 
filter: url(#blur); filter: blur(30px);  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-webkit-transition: 2s -webkit-filter linear;
-moz-transition: 2s -moz-filter linear;
-o-transition: 2s -o-filter linear;
transition: 2s filter linear;
}

http://codepen.io/CSobol/pen/LGCiw

Does transition: filter not work with blur for some reason?

looks like this sample works now :-) – Simon_Weaver Aug 21 '16 at 06:55 — Simon_Weaver, Aug 21 '16 at 06:55

score 36 · Accepted Answer · answered May 08 '14 at 18:45

36

Transition has been unprefixed, but filter has not, so the transition is over-riding the webkit-transition, but then doesn't know what to do with the unprefixed filter. This amendment works:

transition: 2s -webkit-filter linear;

answered May 08 '14 at 18:45

Michael Mullany

30,283
6
81
105

2

Your suggestion has correctly identified the problem. However, if I append that, then the transition only works in webkit browsers, leaving FF, Opera, Safari, and IE with no animation. – Chris Sobolewski May 08 '14 at 21:49
Add more transitions for each pre-fixed filter... or get rid of the unprefixed transition entirely. – Michael Mullany May 08 '14 at 22:29
Yep. Worked like a charm! Thanks a ton for the second set of eyes. I noticed that's what it was doing after you mentioned it. Nice thing to keep eyes peeled for in the future. – Chris Sobolewski May 09 '14 at 02:55
4

Use the cascade and put `transition: 2s filter linear;` at top of the list of transitions. – Ben Racicot Oct 28 '15 at 18:19

score 22 · Answer 2 · answered Mar 05 '15 at 11:34

22

Did you mean like this?

transition: 1s filter linear;
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;

answered Mar 05 '15 at 11:34

J Haagsman

331
2
6

CSS 3 filter (blur) not using transition duration

2 Answers2