Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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/

like image 292
0skar Avatar asked Aug 30 '12 09:08

0skar


People also ask

Which CSS property is used for transition effect?

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.

What are CSS transitions What are their properties?

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

Is CSS transition only for hover?

But transitions are not just limited to use with :hover . You can animate CSS properties, thus use CSS transitions without hover. This is done via transitions using some other CSS techniques, a number of which I've outlined below.


2 Answers

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

like image 146
mddw Avatar answered Oct 23 '22 01:10

mddw


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; 
like image 31
Karl Adler Avatar answered Oct 22 '22 23:10

Karl Adler