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

CssCss Transitions

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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/

Solution 2 - Css

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/

Solution 3 - Css

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/

Solution 4 - Css

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

Solution 5 - Css

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:

enter image description here

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

enter image description here

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

Solution 6 - Css

Try:

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

This worked for me on something similar..

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDineView Question on Stackoverflow
Solution 1 - CssFelix EdelmannView Answer on Stackoverflow
Solution 2 - Cssaldo.roman.nurenaView Answer on Stackoverflow
Solution 3 - CssLucian MarinView Answer on Stackoverflow
Solution 4 - CssSivaView Answer on Stackoverflow
Solution 5 - Cssiplus26View Answer on Stackoverflow
Solution 6 - CssStuRView Answer on Stackoverflow