CODEWITHSUNDEEP
csscss-transitions
0skar
0skar

Reputation: 1168

Is there an animatable transition-property for css filters?

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/

Upvotes: 65

Views: 94377

Answers (4)

ze_castro
ze_castro

Reputation: 79

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

Upvotes: 7

Karl Adler
Karl Adler

Reputation: 16786

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;

Upvotes: 36

AxeEffect
AxeEffect

Reputation: 7431

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.

Upvotes: 6

mddw
mddw

Reputation: 5580

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

Upvotes: 80

Related Questions