CSS3 Transición: A diferencia de transición para * EN * y * * OUT (o regresar del estado de transición)

Question

pregunta original ... actualizado el código de trabajo a continuación:

tengo una imagen de carga que se produce durante un evento de carga ajax. La imagen muestra/oculta al agregar o eliminar una clase de "carga" al elemento del cuerpo. Actualmente, la imagen de carga anima el tamaño de fondo de 0 a 100% y se desvanece en la opacidad (viceversa para la transición de 'retorno').

Lo que quiero lograr, sin embargo, es que la transición de fondo de tamaño suceda al instante (no de transición) en el fundido de salida, por lo que:

• Fundido de entrada: opacidad de 0 a 1 en .2s , el tamaño del fondo de 0 a 100% en .2s

• fundido de salida: opacidad de 1 a 0 en .2s, tamaño del fondo del 100% al 0 debe suceder al instante

  #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 
  } 
  

He cambiado la propiedad de transición para este selector .loading #loader .image a "opacidad" en lugar de "todo", pero aún realiza la transición de fondo de tamaño.

¿Alguien sabe cómo lograr las diferentes transiciones de desvanecimiento y desvanecimiento descritas anteriormente con css3? ¡Gracias!

---

Actualización del Código de Trabajo

La cuestión estaba rompiendo las propiedades individuales (margen, fondo) en una lista separada por comas. Creo que con la transición: todo impedirá que pueda hacer diferentes EN y OUT transiciones.

#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

Aquí es un caso de prueba simplificada:

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

Aviso cómo el opacity se desvanece la misma dentro y fuera, pero la única background desvanece en, e inmediatamente se vuelve azul en fundido de salida.

Usé :hover como ejemplo, pero debería funcionar igual al agregar y eliminar clases con JavaScript.

Demo

Si desea ver un ejemplo más específico, por favor proporcionar una reduced test case en dabblet o Jsfiddle.