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

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

in embargo, lo que quiero lograr es que la transición del tamaño de fondo ocurra instantáneamente (no la transición) al desaparecer, por lo que:

Fade in: opacidad de 0 a 1 en .2s, tamaño de fondo de 0 a 100% en .2s

Fade out: opacidad de 1 a 0 en .2s, tamaño de fondo de 100% a 0 debe suceder instantáneamente

#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 "todos", pero aún realiza la transición de tamaño de fondo.

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

Código de trabajo actualizado

El problema fue dividir las propiedades individuales (margen, fondo) en una lista separada por comas. Creo que usar la transición: todo impedirá que puedas hacer diferentesE yFUER 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;
}