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

109

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?

css css-transitions Jeść obiad
źródło
1
Cześć, właściwie szukam tego problemu. Czy otrzymałeś jakąś akceptowalną odpowiedź?
Milche Patern

Odpowiedzi:

144

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/

Felix Edelmann
źródło
3
Z jakiegoś powodu 1msnie działało dla mnie, ale 0tak.
Flimm
@Flimm, jakiej przeglądarki używasz? A co masz na myśli mówiąc „nie działa”, niczego nie animujesz?
Felix Edelmann
1
U mnie 1msnie zadziałało, ale 1ms nonetak! @ericsoco 0mslub też 0sdziała.
BCoder
3
Jednostki czasu MUSZĄ mieć jednostkę. Więc 0 nie działa tak, jak 4 nie działa, ale 4 będą działać tak samo jak 0.
ESR
2
Szukałem tego tak długo, dziękuję, @FelixEdelmann !!
tatsu,
17

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/

aldo.roman.nurena
źródło
6
Próbuję tego w Chrome i wydaje mi się, że to nie działa. Właściwość allprzejścia wydaje się zastępować wszystkie inne bez względu na wszystko.
animuson
2
Ciekawy. Chyba nie testowałem tego z innymi właściwościami. Kiedy próbowałem color 0, zadziałało, ale na pewno nie działabackground-position 0 . Nawet background 0nie daje mi żadnych rezultatów ... Oto jsFiddle , które skonfigurowałem z menu Gaming.SE. Szczerze mówiąc, testowałem tylko background-positionpoczątkowo, ponieważ właśnie o tym wspomina to pytanie i właśnie to próbowałem zmienić.
animuson
2
U mnie działało na chrome. Nadal działa w IE11, ale od tego tygodnia all właściwość nadpisuje wszystko później w linii.
cirrus
1
Jak powiedział @cirrus, Chrome nie honoruje już czasu trwania 0 sekund, ale możesz sprawić, by działał, dając bardzo krótki czas trwania, na przykład.1ms
GetFree
1
Działa to zarówno w przeglądarce Chrome, jak i Firefox, jeśli podano niezerowy czas trwania.
Naisheel Verdhan
4

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;
}
Siva
źródło
Odpowiedzi typu „spróbuj tego” nie są najlepsze. Lepsze jest wyjaśnienie tego, co robisz.
random_user_name
2

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/

lucianmarin
źródło
2

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:

wprowadź opis obrazu tutaj

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

wprowadź opis obrazu tutaj

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.

iplus26
źródło
W rzeczy samej. To jest krytyczny wgląd. Ponieważ jest to kiepskie, trzeba określać każdą właściwość indywidualnie, a nie allwarto wiedzieć, że jest to jedyny sposób, aby uzyskać pożądane zachowanie w różnych przeglądarkach.
random_user_name
1

Próbować:

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

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

StuR
źródło
ustalenie pozycji tła na 0 nie oznacza usunięcia przejścia z pozycji tła. Prawda?
Milche Patern,
1
To nigdy nie zadziała. Poprzez ponowne zdefiniowanie właściwości przejścia później, całkowicie nadpisujesz poprzednią właściwość przejścia, tak jakby nigdy nie istniała. Nie ulegają konsolidacji.
animuson