CSS3 Transition: transizione diversa per * IN * e * OUT * (o di ritorno dallo stato di transizione)

Question

domanda originale ... il codice di lavoro aggiornata qui sotto:

Ho un carico di immagine che viene in su durante un evento di carico ajax. L'immagine mostra/nasconde aggiungendo o rimuovendo una classe "loading" all'elemento body. Attualmente, l'immagine di caricamento anima la dimensione dello sfondo da 0 a 100% e sfuma l'opacità (viceversa per la transizione "ritorno").

Quello che voglio realizzare, però, è quello di avere la transizione background-size avviene istantaneamente (non di transizione) sul fade out, quindi:

• Dissolvenza in apertura: l'opacità da 0 a 1 in .2s , dimensioni sfondo da 0 a 100% in .2s

• Fade out: opacità 1-0 in .2s, dimensioni sfondo da 100% a 0 dovrebbe accadere istantaneamente

  #loader { 
      width: 100%; 
      height: 100%; 
      position: fixed; 
      top: 0; 
      left: 0; 
      z-index: -1; 
      opacity: 0; 
      -moz-opacity: 0; 
      transition: all .2s ease-in-out 
  } 
  
  
  #loader .image { 
      width: 400px; 
      height: 138px; 
      display: block; 
      position: absolute; 
      z-index: 2000; 
      top: 50%; 
      left: 50%; 
      margin: 0; 
      background: url(assets/images/loading.png) no-repeat; 
      background-size: 0 0; 
      transition: all .2s ease-in-out; 
      -webkit-animation: pulse 400ms ease-out infinite alternate; 
      -moz-animation: pulse 400ms ease-out infinite alternate; 
      -o-animation: pulse 400ms ease-out infinite alternate; 
      animation: pulse 400ms ease-out infinite alternate 
  } 
  
  .loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)} 
  
  .loading #loader .image { 
      background-size: 100% 100%; 
      margin: -69px 0 0 -200px; 
      transition: opacity .2s ease-in-out 
  } 
  

Ho cambiato proprietà di transizione per il selettore .loading #loader .image di "opacità" piuttosto che "tutti", ma esegue ancora la transizione background-size.

Qualcuno sa come raggiungere le diverse fade in e fade out transizioni descritte in precedenza con CSS3? Grazie!

---

Aggiornato codice di lavoro

Il problema stava rompendo le singole proprietà (margini, sfondo) in un elenco separato da virgole. Credo utilizzando transizione: tutto sarà impedire di essere in grado di fare diversi IN e OUT transizioni.

#loader { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    opacity: 0; 
    -moz-opacity: 0; 
    .transition(opacity,.4s); 
} 

#loader .image { 
    width: 400px; 
    height: 138px; 
    display: block; 
    position: absolute; 
    z-index: 2000; 
    top: 50%; 
    left: 50%; 
    margin: 0; 
    background: url(assets/images/loading.png) no-repeat; 
    background-size: 0 0; 

    -webkit-transition: margin .4s ease-in-out; 
    -moz-transition: margin .4s ease-in-out; 
    -o-transition: margin .4s ease-in-out; 
    -ms-transition: margin .4s ease-in-out; 
    transition: margin .4s ease-in-out; 

    -webkit-animation: pulse 400ms ease-out infinite alternate; 
    -moz-animation: pulse 400ms ease-out infinite alternate; 
    -o-animation: pulse 400ms ease-out infinite alternate; 
    animation: pulse 400ms ease-out infinite alternate 
} 

.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)} 

.loading #loader .image { 
    background-size: 100% 100%; 
    margin: -69px 0 0 -200px; 

    -webkit-transition: background .4s ease-in-out, margin .4s ease-in-out; 
    -moz-transition: background .4s ease-in-out, margin .4s ease-in-out; 
    -o-transition: background .4s ease-in-out, margin .4s ease-in-out; 
    -ms-transition: background .4s ease-in-out, margin .4s ease-in-out; 
    transition: background .4s ease-in-out, margin .4s ease-in-out; 
} 

Answer 1

Ecco un caso di test semplificato:

div {background:blue; opacity:0; transition: opacity 2s ease-in-out;} 
div.loading {opacity:1; background:red; transition: opacity 2s ease-in-out, background 1s ease-in;} 

notare come il opacity svanisce lo stesso dentro e fuori, ma la background svanisce solo in, e subito diventa blu in fade out.

Ho usato :hover come esempio, ma dovrebbe funzionare lo stesso quando aggiungere e rimuovere le classi con JavaScript.

Demo

Se vuoi un esempio più specifico si prega di fornire un reduced test case su dabblet o Jsfiddle.