Question

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

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

问题：

1）它与它扩展的速度相同。

2nd）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。

Answer 2

CSS不区分鼠标悬停和鼠标悬停，但这个帖子似乎可能有你问题的答案：

MouseOver and MouseOut In CSS

编辑：我刚才意识到你说你试过这个。 Javascript可能是您唯一的选择。

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

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

3 个答案: