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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try   -webkit-transition  all  2s linear  background-position 0    This worked for me on something similar

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to css-transitions