title: css transition: choose different speed for hover out
body: <p>Is it possible to choose a different timing/speed for transition in css so when mouse hover over a div it expands with different speed than the speed it retracts back to its original width not hover state.</p>
  
  <p>I have tried declaring different transition speeds in :hoer and normal state styling, however, only normal state style seems to apply. </p>
  
  <p><a href="http://jsfiddle.net/tpf8mv51/3/" rel="noreferrer">http://jsfiddle.net/tpf8mv51/3/</a></p>
  
  <p>Problems: </p>
  
  <p>1st) it goes with same speed it expanded with.</p>
  
  <p>2nd) zindex takes effect after animation is completed for reasons i don't gte.</p>
  
  <p>3rd) other images get affected even though they shouldn't, by affected i mean they 99% of time disappear till animation is done. </p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  body {
      overflow: hidden;
  }
  .main {
      font-size: 0;
      height: 100%;
      width: 100%;
      display: none;
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
  }
  .main img {
      -webkit-user-select: none;
      width: 25%;
      -webkit-transition: transform .5s;
      transform-origin: left;
      z-index: 0;
      vertical-align: top;
  }
  .main img:hover {
      transform: scale(1.3, 1);
      z-index: 1;
  }
  </code></pre>