css - 在图像上使用过渡时打开/关闭循环

Question

-- 患有癫痫症的人 -- 不要发射 --

我在图像上准备了某种过渡(悬停时平移 + 缩放)。几乎一切正常，但有一个问题。当我将鼠标悬停在图像上并将鼠标拖动到源位置(绿色)时，循环(打开 - 关闭图像开始非常快)。如何避免这种行为？

https://codepen.io/anon/pen/KxmJdK

html, body{
  height: 100%;
  border: 1px solid black;
}

.container{
  border: solid red 1px;
  background-color: green;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img{
  width: 400px;
}

img:hover{
  transform: scale(1.2) translate(30%, 0);
  transition: all .2s ease-in-out;
  box-shadow: 5px 5px 10px black;
}

<div class='center container'>
  <img src='https://images.pexels.com/photos/120049/pexels-photo-120049.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
</div>

Answer 1

只需在 css 中稍作调整即可解决此问题:

.container img {
    display: block;
    width: 400px;
}
.container:hover img {
    transform: scale(1.2) translate(30%, 0);
    transition: all .2s ease-in-out;
    box-shadow: 5px 5px 10px black;
}

基本上你需要将容器添加到等式中，所以它不会关心鼠标是否离开图像区域。

codepen