How do I apply CSS3 transition to all properties except background-position?

Dine picture Dine · May 15, 2012 · Viewed 102.6k times · Source

I'd like to apply a CSS transition to all properties apart from background-position. I tried to do it this way:

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

First I set all properties to transition and then I tried to overwrite solely the transition for the background-position property.

However this seems to also reset all other properties - so basically none of the transitions seem to happen any more.

Is there a way to do this without listing all properties?

Answer

Felix Edelmann picture Felix Edelmann · Jun 23, 2014

Here's a solution that also works on Firefox:

transition: all 0.3s ease, background-position 1ms;

I made a small demo: http://jsfiddle.net/aWzwh/