Come applico la transizione CSS3 a tutte le proprietà eccetto background-position?

109

Vorrei applicare una transizione CSS a tutte le proprietà tranne la posizione dello sfondo. Ho provato a farlo in questo modo:

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

Per prima cosa ho impostato tutte le proprietà sulla transizione e poi ho provato a sovrascrivere solo la transizione per la proprietà background-position.

Tuttavia, questo sembra ripristinare anche tutte le altre proprietà, quindi praticamente nessuna delle transizioni sembra più accadere.

C'è un modo per farlo senza elencare tutte le proprietà?

css css-transitions

— Cenare
fonte

1

Ciao, sto effettivamente cercando questo problema. Hai ricevuto una risposta accettabile?

— Milche Patern

144

Ecco una soluzione che funziona anche su Firefox:

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

Ho fatto una piccola demo: http://jsfiddle.net/aWzwh/

— Felix Edelmann
fonte

3

Per qualche motivo 1msnon ha funzionato per me, ma 0ha funzionato.

— Flimm

@Flimm, quale browser stai utilizzando? E cosa intendi con "non ha funzionato", non ha animato nulla?

— Felix Edelmann

1

Per me 1msnon ha funzionato, ma 1ms noneha funzionato! @ericsoco 0mso anche 0slavori.

— BCoder

3

Le unità di tempo DEVONO avere un'unità. Quindi 0 non funziona come 4 non funzionerà, ma 4 funzionerà proprio come funzioneranno gli 0.

— ESR

2

L'ho cercato per così tanto tempo, grazie, @FelixEdelmann !!

— tatsu

17

Spero di non essere in ritardo. Si ottiene utilizzando una sola riga!

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

Funziona su Chrome. Devi separare le proprietà CSS con una virgola.

Ecco un esempio funzionante: http://jsfiddle.net/H2jet/

— aldo.roman.nurena
fonte

6

Lo sto provando su Chrome e non sembra funzionare per me. La allproprietà di transizione sembra prevalere su tutte le altre, qualunque cosa accada.

— animuson

2

Interessante. Immagino di non averlo testato con altre proprietà. Quando ho provato color 0ha funzionato, ma di certo non funziona background-position 0. Anche background 0produce nessun risultato per me ... Ecco un jsFiddle ho truccato dal menu Gaming.SE. Ad essere onesti, ho provato solo background-positioninizialmente perché è quello che la domanda menziona specificamente ed è quella che stavo cercando di cambiare me stesso.

— animuson

2

Per me funzionava su Chrome. Funziona ancora in IE11 ma a partire da questa settimana la proprietà all ora ha la precedenza su qualsiasi altra cosa sulla linea.

— cirri

1

Come ha detto @cirrus, Chrome non rispetta più una durata di 0 secondi, ma puoi farlo funzionare dando invece una durata molto breve, come.1ms

— GetFree

1

Funziona sia su Chrome che su Firefox se viene fornita una durata diversa da zero secondi.

— Naisheel Verdhan

4

Prova questo...

* {
    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
fonte

"prova questo" le risposte di solo codice non sono le migliori. Meglio una spiegazione di quello che stai facendo.

— random_user_name

2

Puoi provare a utilizzare la modalità standard W3C:

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

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

— lucianmarin
fonte

2

Per chiunque cerchi una scorciatoia, per aggiungere la transizione per tutte le proprietà ad eccezione di una proprietà specifica con ritardo , sii consapevole delle differenze anche tra i browser moderni.

Una semplice demo qui sotto mostra la differenza. Controlla il codice completo

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

Chrome "combinerà" le due animazioni (che è come mi aspetto), come di seguito:

Mentre Safari lo "separa" (cosa che potrebbe non essere prevista):

Un modo più compatibile è che assegni la transizione specifica a una proprietà specifica, se hai un ritardo per una di esse.

— iplus26
fonte

Infatti. Questa è una visione critica. Dato che è inutile dover specificare ogni proprietà individualmente piuttosto che all, è utile sapere che è l'unico modo per ottenere il comportamento desiderato attraverso i browser.

— random_user_name

1

Provare:

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

Questo ha funzionato per me su qualcosa di simile ..

— Stur
fonte

fissare background-position a 0 non è = rimuovere la transizione da background-position. Non è vero?

— Milche Patern

1

Questo non potrà mai funzionare. Ridefinendo in seguito la proprietà di transizione, si sostituisce completamente la proprietà di transizione precedente, come se non fosse mai esistita. Non si consolidano.

— animuson