Question

我悬停在我的页面上时会出现一个反弹动画（在箭头图像上）。但是，如果光标靠近上边缘，由于内容区域的位置从我可以收集的位置改变，它通常会抖动。图像将移动，将鼠标移出悬停区域，突然重置图像位置，然后重复直到移动鼠标。

有没有人知道如何解决这个问题？可以是CSS / Javascript /其他一些库，对我来说无关紧要。

.arrow-main {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  width: 90px;
}

.bounce:hover {
    -webkit-animation:bounce .9s infinite;
    -moz-animation:bounce .9s infinite;
    -o-animation:bounce .9s infinite;
    animation:bounce .9s infinite;
}

@-webkit-keyframes bounce {
  0%       { bottom:10px; }
  50%      { bottom:0px; }
  100%     { bottom:10px; }
}

@-moz-keyframes bounce {
  0%       { bottom:10px; }
  50%      { bottom:0px; }
  100%     { bottom:10px; }
}

@-o-keyframes bounce {
  0%       { bottom:10px; }
  50%      { bottom:0px; }
  100%     { bottom:10px; }
}

@keyframes bounce {
  0%       { bottom:10px; }
  50%      { bottom:0px; }
  100%     { bottom:10px; }
}

我实际上制作了一个代码来试图说明问题，但它根本没有抖动......我正在使用Chrome。

编辑：刚刚再次尝试了编写码器，并且它应该抖动。

编辑2：我修改了codepen到目前为止试用了评论，如果你把光标放在箭头img的底部附近，你应该知道我想要打击什么。

CodePen

CSS反弹悬停动画抖动

0 个答案: