Javascript CSS反弹悬停动画抖动

我有一个反弹动画出现在我的页面上的悬停（在箭头图像上）。但是，如果光标靠近上边缘，它通常会抖动，这是因为内容区域的位置与我所能收集的位置不同。图像将移动，将鼠标移出悬停区域，突然重置图像位置，并重复，直到移动鼠标

有人知道如何解决这个问题吗？可以是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：到目前为止，我修改了代码笔来尝试注释，如果你把光标放在箭头img的底部附近，你应该知道我在试图对抗什么

---

可能代替

底部：1%只需将其设置为0。它应该消除开始抖动，但不确定你是否能对结束抖动做些什么。@A.Lau说你可以改变
底部的
值来消除初始抖动。您还可以使用一些javascript删除结束抖动。看问题。我换了密码笔，它更好。也许我看到的是，如果鼠标恰好从图像上移开，会产生两种抖动？如果你靠近一个边缘，箭基本上会快速地摆动。。。也许代码笔没有提供足够好的例子。这在我的本地测试站点上非常突出。虽然我可能可以让Javascript解决方案工作，但这样看来我只能有效地进行一次反弹。看起来这将是最优雅的选择。可能不是
bottom:1%只需将其设置为0。它应该消除开始抖动，但不确定你是否能对结束抖动做些什么。@A.Lau说你可以改变
底部的
值来消除初始抖动。您还可以使用一些javascript删除结束抖动。看问题。我换了密码笔，它更好。也许我看到的是，如果鼠标恰好从图像上移开，会产生两种抖动？如果你靠近一个边缘，箭基本上会快速地摆动。。。也许代码笔没有提供足够好的例子。这在我的本地测试站点上非常突出。虽然我可能可以让Javascript解决方案工作，但这样看来我只能有效地进行一次反弹。看起来这将是最优雅的选择。