css transition: choose different speed for hover out

Question

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.

I have tried declaring different transition speeds in :hoer and normal state styling, however, only normal state style seems to apply.

http://jsfiddle.net/tpf8mv51/3/

Problems:

1st) it goes with same speed it expanded with.

2nd) zindex takes effect after animation is completed for reasons i don't gte.

3rd) other images get affected even though they shouldn't, by affected i mean they 99% of time disappear till animation is done.

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

Answer 1

Don't fret. try this (quick IN, slow OUT):

.main img {
  width: 25%;
  height: 100%;
  transition: width 2s ease;
}
.main img:hover {
  width: 50%;
  transition: width .5s ease;
}

Your Fiddle as I can see it only has one transition. If you're only changing the width, tell it to change the width, which has full browser support, rather than calling transform with all the attendant prefixes.