transform: scale(n); - 鼠标移入和移出时不同

Question

我可以为您提供帮助，以下是您需要翻译的内容：

我在网站上使用transform: scale();。希望有人能帮我解答一个在网上搜索无法解决的问题。

这是我的代码: HTML:

<div class="hopp_circle_img">
   <img src="..." alt="" />
</div>

CSS：

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
.hopp_circle_img img:hover {
  display: block; 
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}   

这个可以实现，但是我被要求在鼠标移入和移出时使效果不同。例如，在鼠标移入时快速缩放，而在鼠标移出时慢慢缩放。CSS3或Javascript中是否有解决方案？

谢谢 rabox

- rabox66

Answer 1

将元素(.hopp_circle_img img)设置为较慢的过渡效果，当鼠标悬停在元素上时，将其设置为较快的过渡效果(.hopp_circle_img img:hover)。因此，当您离开该元素时，将使用较慢的过渡效果。

我已经使用不同的持续时间和缓动设置了transition简写属性，但您可以更改transition-duration，或设置transition-delay，或使用其他不同的transition-timing-function(缓动)。

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}
.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}

<div class="hopp_circle_img">
  <img src="https://65.media.tumblr.com/avatar_39c12973e9fe_128.png" alt="" />
</div>

- Ori Drori

Answer 2

抱歉，在发布后我自己解决了这个问题。必须在:hover上设置不同的过渡时间。例如：

.hopp_circle_img img {
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
.hopp_circle_img img:hover {
  display: block; 
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: transform 2s;
  transition: transform 2s;

}

}   

- rabox66