Search code examples
csscss-transitionscss-filters

CSS filter() Transformation/transition time

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);
}
Solution

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