Jak zastosować przejście CSS3 do wszystkich właściwości oprócz pozycji tła?

Chciałbym zastosować przejście CSS do wszystkich właściwości oprócz pozycji tła. Próbowałem to zrobić w ten sposób:

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

Najpierw ustawiłem wszystkie właściwości na przejście, a następnie próbowałem nadpisać wyłącznie przejście dla właściwości background-position.

Jednak wydaje się, że resetuje to również wszystkie inne właściwości - więc w zasadzie żadne z przejść nie wydaje się już mieć miejsca.

Czy można to zrobić bez podawania wszystkich właściwości?

Oto rozwiązanie, które działa również w przeglądarce Firefox:

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

Zrobiłem małe demo: http://jsfiddle.net/aWzwh/

Mam nadzieję, że się nie spóźnię. Dokonuje się tego za pomocą tylko jednej linii!

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

To działa w Chrome. Musisz oddzielić właściwości CSS przecinkiem.

Oto działający przykład: http://jsfiddle.net/H2jet/

Spróbuj tego...

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

Możesz spróbować użyć standardowego sposobu W3C:

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

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

Każdy szuka skrótu, aby dodać przejście dla wszystkich właściwości z wyjątkiem jednej określonej właściwości z opóźnieniem , dlatego należy pamiętać, że istnieją różnice nawet między nowoczesnymi przeglądarkami.

Poniższe proste demo pokazuje różnicę. Sprawdź pełny kod

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

Chrome „połączy” te dwie animacje (zgodnie z oczekiwaniami), jak poniżej:

Podczas gdy Safari „oddziela” go (co może nie być oczekiwane):

Bardziej kompatybilnym sposobem jest przypisanie określonego przejścia dla określonej właściwości, jeśli masz opóźnienie dla jednej z nich.

Próbować:

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

To zadziałało dla mnie na coś podobnego.