Come avere più transizioni CSS su un elemento?

327

È una domanda piuttosto semplice ma non riesco a trovare un'ottima documentazione sulle proprietà di transizione CSS. Ecco lo snippet CSS:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

Come puoi vedere, le proprietà di transizione si sovrascrivono a vicenda. Così com'è, l'ombra del testo si animerà, ma non il colore. Come faccio ad animare entrambi contemporaneamente? Grazie per qualsiasi risposta

animation css css-transitions

— Eric Thoma
fonte

Non dimenticare che transition: allè molto pieno di

— Oğuzhan Kahyaoğlu,

584

Le proprietà di transizione sono delimitate da virgole in tutti i browser che supportano le transizioni:

.nav a {
  transition: color .2s, text-shadow .2s;
}

easeè la funzione di temporizzazione predefinita, quindi non è necessario specificarla. Se lo desideri davvero linear, dovrai specificarlo:

transition: color .2s linear, text-shadow .2s linear;

Questo inizia a diventare ripetitivo, quindi se stai usando gli stessi tempi e le stesse funzioni di temporizzazione su più proprietà è meglio andare avanti e usare le varie transition-*proprietà anziché la scorciatoia:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

— coreyward
fonte

11

Presumo perché transform sia una catena in cui l'ordine conta, quindi la sintassi è piacevole se sei abituato al concatenamento funzionale, mentre la transizione richiede un elenco non ordinato di elementi completamente indipendenti, quindi le virgole sono appropriate

— mirichan

1

Come commento generale sulle transizioni nei CSS, si dovrebbe tenere presente che avere definizioni di transizione multiple una dopo l'altra non funzionerà e, per riuscirci, queste devono essere nella stessa definizione (come nella SA qui). Secondo le regole di base del CSS, si applica la regola "più recente", quindi se ci sono più definizioni in righe separate, verrà applicata solo l'ultima definizione. Cordiali saluti

— TheCuBeMan

37

Puoi anche semplicemente significativamente con:

.nav a {
    -webkit-transition: all .2s;
}

— XML
fonte

44

In realtà è possibile rimuovere "tutto" poiché è l'impostazione predefinita, se non diversamente specificato.

— joshnh,

13

+1 per un punto eccellente, ma penso che sia utilmente esplicito tenerlo lì, in particolare per coerenza e comprensione tra i team.

— XML

4

Attenzione! Se si sviluppa per dispositivi mobili, in combinazione con elementi con accelerazione hardware, i nuovi dispositivi diventano glitch e vecchi dispositivi inutilizzabili.

— Ilya Karnaukhov,

2

Grazie, @ CanerŞahin. Puoi fornirci documentazione o strumenti di benchmarking che aiuteranno le persone a comprendere questo punto? Inoltre, vedi prove che dimostrano che "tutto" è peggio che non utilizzare alcun identificatore?

— XML

3

@XML Il modo in cui è stato spiegato ci sono due effetti negativi. 1, Il browser aggiunge risorse extra a causa dell'uso di "tutto". Il browser ascolterà attentamente quell'elemento in attesa di eventuali modifiche meno performanti e in grado di creare jank di pagina. 2, può creare effetti inaspettati se uno sviluppatore inserisce successivamente un colore di sfondo che verrà quindi trasferito e che potrebbe non essere previsto o richiesto.

— Stefan Burt,

29

Qualcosa di simile al seguente consentirà più transizioni contemporaneamente:

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

Esempio: http://jsbin.com/omogaf/2

— Delan Azabani
fonte

24

Se si rendono animate tutte le proprietà allo stesso modo, è possibile impostarle separatamente per non ripetere il codice.

 transition: all 2s;
 transition-property: color, text-shadow;

C'è di più qui: stenografia di transizione CSS con più proprietà?

Eviterei di usare la proprietà all (la proprietà di transizione sovrascrive 'all'), dal momento che potresti finire con comportamenti indesiderati e hit inaspettati.

— Corey Young
fonte

2

.nav a {
    transition: color .2s, text-shadow .2s;
}

— LocoRoco
fonte

1

Ecco un MENO mixin per la transizione di due proprietà contemporaneamente:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

— Mark P
fonte

autoprefixer è ancora più bello!

— riscritto il

correzione automatica + stilo FTW.

— Jason Lydon,

1

È possibile effettuare le transizioni multiple impostate con valori diversi per durata, ritardo e funzione di temporizzazione. Per dividere diverse transizioni utilizzare,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

Riferimento: https://kolosek.com/css-transition/

— Nesha Zoric
fonte

0

È anche possibile evitare di specificare del tutto le proprietà.

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }

— jerblack
fonte