title: Move HTML element upwards on hover
body: <p>I am trying to move an HTML element up about 10px whenever a user hovers their mouse over it. I did some research on w3schools, but I could not find any information that helped me. Most of their animation examples were using keyframes and I'm pretty sure that's not what I need because I'm trying to trigger an animation when somebody hovers over the element. I could be wrong though and that's why I'm posting here.</p>
  <p>Here's the element I'm trying to move:</p>
  <pre><code>&lt;div id=&quot;arrow&quot;&gt;
    &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-arrow-down fa-2x&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>For my CSS:</p>
  <pre><code>#arrow {
    padding-top: 310px;
    color: #5C6B7E;
    position: relative;
    /* some kind of animation property here? */
  }
  
  #arrow:hover {
    /* new properties once user hovers */
  }
  </code></pre>
  <p>I'm not sure what I need to add to make the element animate up, the examples on w3schools weren't of much help. If anybody could point me in the right direction I would be extremely appreciative. Thank you Stack Overflow.</p>