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

Question

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 1

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/

Answer 2

Hope not to be late. It is accomplished using only one line!

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 

That works on Chrome. You have to separate the CSS properties with a comma.

Here is a working example: http://jsfiddle.net/H2jet/

Answer 3

Try this...

* {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}

Answer 4

Try:

-webkit-transition: all .2s linear, background-position 0;

This worked for me on something similar..

Answer 5

You can try using the standard W3C way:

.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }

http://jsfiddle.net/H2jet/60/

Answer 6

For anyone looks for a shorthand way, to add transition for all properties except for one specific property with delay, be aware of there're differences among even modern browsers.

A simple demo below shows the difference. Check out full code

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chrome will "combine" the two animation (which is like I expect), like below:

While Safari "separates" it (which may not be expected):

A more compatible way is that you assign the specific transition for specific property, if you have a delay for one of them.