css過渡：選擇不同的速度懸停出

Question

是否有可能選擇不同的時間/速度在css中進行轉換，因此當鼠標懸停在div上時，它以不同的速度展開，而不是速度縮回原始寬度而不是懸停州。

我曾嘗試聲明不同的轉換速度：hoer和正常狀態樣式，但是，只有正常狀態樣式似乎適用。

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

問題：

月1日），它會與它具有擴展相同的速度。

2）zindex在完成動畫之後生效，原因是我不會gte。 3）其他圖像即使不應該受到影響，受影響我的意思是他們99％的時間消失，直到動畫完成。

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

CSS不鼠標懸停及移出時進行區分，但這個線程看起來它可能有回答你的問題：

MouseOver and MouseOut In CSS

編輯：我只是意識到你說你已經嘗試這個。 Javascript可能是您唯一的選擇。

Answer 2

不要擔心。試試這個（快速輸入，慢輸出）：

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

你的小提琴，我可以看到它只有一個過渡。如果您只更改width，請告訴它更改具有完整瀏覽器支持的width，而不是使用所有伴隨前綴呼叫transform。

Answer 3

更新與以下（添加轉）你的CSS

.main img { 
    -webkit-user-select: none; 
    width: 25%; 
    -webkit-transition: transform .5s; 
    transform-origin: left; 
    z-index: 0; 
    vertical-align: top; 
    transition:all 1s; 
} 
.main img:hover { 
    transform: scale(1.3, 1); 
    z-index: 1; 
    transition:all 1s; 
}