CSS3悬停过渡效果量表

Question

我似乎在悬停过渡时出现问题。当它到达转换的末尾时，它会跳回到正常的比例。不知道问题在哪里。任何IDEA我该怎么办？

＆＃13;

＆＃13;

#image1 {
position: relative;
height: 150px;
width: 350px;
top: 100px;
left: 3%;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
transition: All 0.900s linear;
-webkit-transition: All 0.900s linear;
-moz-transition: All 0.900s linear;
-o-transition: All 0.900s linear;
transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
-webkit-transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
-moz-transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
-o-transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
-ms-transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
}
#image1:hover {
position: relative;
height: 150px;
width: 350px;
top: 100px;
left: 3%;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
-webkit-transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
-moz-transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
-o-transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
-ms-transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
}

＆＃13;

<img src="http://placehold.it/350x150" id="image1">

＆＃13;

＆＃13;

＆＃13;

Answer 1

悬停事件会移动侦听相同悬停事件的元素。因此，一旦过渡结束，只要稍微移动光标，您的元素就不会再出现。

您应该尝试将图像包装在一个固定的容器中，并听取悬停在此容器上的信息。

编辑：添加了以下代码段：

＆＃13;

＆＃13;

#image1 {
  position: relative;
  height: 150px;
  width: 350px;
  top: 100px;
  left: 3%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  transition: All 0.900s linear;
  -webkit-transition: All 0.900s linear;
  -moz-transition: All 0.900s linear;
  -o-transition: All 0.900s linear;
  transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
#container:hover #image1 {
  position: relative;
  height: 150px;
  width: 350px;
  top: 100px;
  left: 3%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
  -webkit-transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
  -moz-transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
  -o-transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
  -ms-transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
}

＆＃13;

<div id="container">
  <img src="http://placehold.it/350x150" id="image1">
</div>

＆＃13;

＆＃13;

＆＃13;