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?

Hi, i am actually looking for this issue. Did you get any acceptable answer ? — Milche Patern, Mar 25 '13 at 19:34

score 176 · Accepted Answer · answered Jun 23 '14 at 16:43

176

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/

answered Jun 23 '14 at 16:43

Felix Edelmann

4,959
3
28
34

3

For some reason `1ms` didn't work for me, but `0` did. – Flimm Jul 01 '15 at 16:24
@Flimm, what browser are you using? And what do you mean with "didn't work", didn't animate anything? – Felix Edelmann Nov 15 '15 at 12:03
Google Chrome doesn't take `0` as a accepted parameter for transitions but 1ms seems to do the trick – Howdy_McGee Feb 12 '16 at 20:38
1

For me `1ms` didn't worked, but `1ms none` did! @ericsoco `0ms` or `0s` works, too. – Fawkes Sep 22 '16 at 07:00
3

Units of time MUST have a unit. So 0 doesn't work just like 4 won't work, but 4s will work just as 0s will work. – ESR Jan 04 '17 at 16:11
Be aware of there're differences among even modern browsers. check out my answer below. – iplus26 Jul 02 '18 at 06:19
I applied this property, and while my background image doesn't 'dance' anymore in Safari, it still animates in every major browser I've tested. Thus, I don't see how this answers the original question. – Doug Wilhelm Jul 27 '18 at 21:58

aldo.roman.nurena · Answer 2 · 2013-09-17T03:16:38.650

21

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/

edited Sep 17 '13 at 03:16

answered Feb 28 '13 at 14:50

aldo.roman.nurena

1,323
12
26

7

I'm trying this on Chrome, and it doesn't seem to work for me. The `all` transition-property seems to override all the others no matter what. – animuson Sep 17 '13 at 02:24
@animuson see my edited post, I added a jsfiddle example. In fact, it is not working in Mozilla yet, but it is in Chrome – aldo.roman.nurena Sep 17 '13 at 03:18
2

Interesting. I guess I hadn't tested it with other properties. When I tried `color 0` it worked, but it is certainly not working with `background-position 0`. Even `background 0` produces no results for me... [Here's a jsFiddle](http://jsfiddle.net/x7zHW/) I rigged up from the Gaming.SE menu. To be honest I only even tested `background-position` initially because that's what the question specifically mentions and is the one I was trying to change myself. – animuson Sep 17 '13 at 03:27
2

It used to work on chrome for me. It's still working in IE11 but as of this week the all property now overrides anything later on the line. – cirrus Feb 24 '14 at 21:44
1

As @cirrus said, Chrome doesn't honor a 0 second duration anymore, but you can make it work giving a very short duration instead, like `.1ms` – GetFree Aug 11 '14 at 03:47
1

This works on both Chrome and Firefox if a non-zero second duration is supplied. – Naisheel Verdhan Mar 01 '15 at 20:52
It didn't work for me when I copied it as is. But I got it working by adding `0s` instead of `0`. Mentioning the `s` after `0` made it work – Gangula Oct 23 '21 at 18:44

score 10 · Answer 3 · answered May 10 '16 at 09:17

10

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/

answered May 10 '16 at 09:17

Lucian Marin

184
1
5

score 4 · Answer 4 · answered Sep 27 '13 at 05:53

4

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

answered Sep 27 '13 at 05:53

Siva

469
4
3

"try this" code-only answers aren't the best. Better is some explanation of what you're doing. – random_user_name Oct 03 '19 at 19:15

score 4 · Answer 5 · answered Jul 02 '18 at 06:18

4

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.

answered Jul 02 '18 at 06:18

iplus26

2,518
15
26

Indeed. This is critical insight. As lame is it is to have to specify each property individually rather than `all`, it's useful to know that it's the only way to get the desired behavior across browsers. – random_user_name Oct 03 '19 at 19:16
Do you mean using the `all` keyword will cause issues? So is it recommended to specifically mention each transition? and is this still an issue after 3 years? – Gangula Oct 23 '21 at 18:49

StuR · Answer 6 · 2013-09-17T21:38:25.700

2

Try:

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

This worked for me on something similar..

edited Sep 17 '13 at 21:38

answered Oct 18 '12 at 20:00

StuR

12,042
9
45
66

fixing background-position to 0 is not = to removing transition from background-position. Isn't it ? – Milche Patern Mar 25 '13 at 19:35
1

This cannot ever work. By re-defining the transition property afterwards, you completely override the previous transition property, as if it never existed. They do not get consolidated. – animuson Sep 17 '13 at 02:13
It didn't work for me when I copied it as is. But I got it working by adding `0s` instead of `0`. Mentioning the `s` after `0` made it work – Gangula Oct 23 '21 at 18:45

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

6 Answers6

Linked

Related