css过渡:选择不同的速度悬停

Question

是否有可能为css中的转换选择不同的时间/速度,因此当鼠标悬停在div上时,它会以不同于其缩回的速度扩展到其原始宽度而不是悬停状态.

我尝试过声明不同的转换速度:hoer和normal状态样式,但是,只有正常的状态样式似乎适用.

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

问题:

1)它与它扩展的速度相同.

2)zindex在动画完成后生效,原因是我不接受.

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

不要担心.试试这个(快速IN,慢速OUT):

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

你可以看到它的小提琴只有一个过渡.如果您只是更改width,请告诉它更改width具有完全浏览器支持的,而不是transform使用所有话务员前缀进行呼叫.