3

I've got a CSS filter for blurring an element and it works beautifully... But I'd like it to ease into the blur but can't figure out what css transition-property controls it?

I was using transition: 1s; but that breaks another animation on the element (it slides out to the left).

.event {
     // transition: 1s; // Works with blur() but breaks other animations
}

.event:hover {
     -moz-filter: blur(5px);
     -ms-filter: blur(5px);
     -o-filter: blur(5px);
     -webkit-filter: blur(5px);
     filter: blur(5px);
}
Tyler Wall
  • 3,747
  • 7
  • 37
  • 52

1 Answers1

3

The property name in a declaration is always the portion before the colon, even if the value is a function. So, the corresponding transition-property is filter:

.event {
    transition-property: -moz-filter, -ms-filter, -o-filter, -webkit-filter, filter;
    transition-duration: 1s;
}

This applies not just to the filter property, but also to properties like transform and such that typically accept functions as values.

This also means that if you have, for example, multiple different filters or multiple transforms, all of them for a given property will be animated.

Tyler Wall
  • 3,747
  • 7
  • 37
  • 52
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • @Wallter: I accepted your edit but I'm not sure if browsers will correctly apply their relevant prefixes and safely ignore the others. I've seen [Chrome completely break down on other unrecognized transition properties](http://stackoverflow.com/questions/22457222/ie10-11-uses-transform-webkit-transform/22457802#22457802) for example. It might be worth specifying each transition property separately instead. – BoltClock Aug 11 '14 at 18:05
  • I'm about to roll this out to Dev QA and regression testing, I'll report back if anything breaks. Although, I do develop primarily with Chrome (Stable, Beta, and Canary) and didn't have a problem - the arguments are in the same order... but we'll see – Tyler Wall Aug 12 '14 at 15:43