title: CSS bounce hover animation jitters
body: <p>I have a bounce animation occur on hover on my page (on an image of an arrow). However, if the cursor is near the top edge, it will generally jitter, due to the change of the position of the content area from what I can gather. The image will move, bringing your mouse out of the hover area, resetting the image position abruptly, and repeating until you move the mouse.</p>
  
  <p>Does anyone have any idea how to fix this? Can be CSS/Javascript/some other library, doesn't matter to me.</p>
  
  <pre><code>.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; }
  }
  </code></pre>
  
  <p>I actually made a codepen to try and illustrate the issue, but it doesn't jitter at all... I'm using Chrome.</p>
  
  <p>EDIT: Just tried the codepen again, and it jitters as it should.</p>
  
  <p>EDIT 2: I modified the codepen to try out the comments so far, and if you hold your cursor near the bottom of the arrow img, you should get an idea of what I am trying to combat.</p>
  
  <p><a href="http://codepen.io/corynorell/pen/LWXyVr" rel="nofollow noreferrer">CodePen</a></p>