CSS3 Transition: Transition différente pour * IN * et * OUT * (ou revenant de l'état de transition)

Question d'origine... mise à jour de code de travail ci-dessous:

J'ai un chargement de l'image qui apparaît lors d'une requête ajax charge de l'événement. L'image affiche/masque en ajoutant ou en supprimant un "chargement" de la classe de l'élément body. Actuellement, le chargement d'image anime fond de taille de 0 à 100%, et disparaît dans l'opacité (et vice-versa pour le "retour" de transition).

Ce que je veux accomplir, cependant, est d'avoir en arrière-plan, la taille de la transition se produire instantanément (pas de transition) sur le fade out, donc:

• Fade in: l'opacité de 0 à 1 .2s, arrière-plan taille de 0 à 100%.2s
• Fade out: l'opacité de 1 à 0 .2s, arrière-plan de la taille de 100% à 0 devrait arriver instantanément

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

J'ai changé de transition de la propriété de ce sélecteur .loading #loader .image à "l'opacité" plutôt que de "tous", mais il remplit toujours en arrière-plan, la taille de la transition.

Personne ne sait comment atteindre les différentes fade in et fade out transitions décrites ci-dessus avec css3? Merci!

---

Mise À Jour Du Code Qui Fonctionne

La question était de casser les propriétés individuelles (marge, arrière-plan) dans une liste séparée par des virgules. Je crois que l'aide à la transition: tout va vous empêcher d'être en mesure d'effectuer différents DANS et HORS transitions.

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

source d'informationauteur j-man86 | 2012-01-20