title: CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state)
body: <p><em><strong>Original Question... updated working code below:</em></strong></p>
  
  <p>I have a loading image which comes up during an ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates background-size from 0 to 100%, and fades in the opacity (vice versa for the 'return' transition).</p>
  
  <p>What I want to accomplish, though, is to have the background-size transition happen instantly (not transition) on the fade out, so:</p>
  
  <ul>
  <li>Fade in: opacity from 0 to 1 in .2s, background size from 0 to 100% in .2s</li>
  <li><p>Fade out: opacity from 1 to 0 in .2s, background size from 100% to 0 <em>should happen instantly</em></p>
  
  <pre><code>#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
  }
  </code></pre></li>
  </ul>
  
  <p>I've changed transition property for this selector <code>.loading #loader .image</code> to "opacity" rather than "all", but it still performs the background-size transition.</p>
  
  <p>Does anyone know how to achieve the different fade in and fade out transitions described above with css3? Thanks!</p>
  
  <hr>
  
  <p><em><strong>Updated Working Code</em></strong></p>
  
  <p>The issue was breaking out the individual properties (margin, background) into a comma separated list. I believe using transition: all will prevent you from being able to do different <em>IN</em> and <em>OUT</em> transitions.</p>
  
  <pre><code>#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;
  }
  </code></pre>