CSS Link Transition Issue

Question

I want my link to have a smooth transition no matter how fast I move my cursor over it. And the problem is demonstrated in this plunkr:

http://plnkr.co/edit/UPEdxjWIT4y12RbqRo9a?p=info

Here is the problem: if I hover over the link slowly, it works fine. However, if you move your cursor quickly to the link, the smooth transition is gone and the link just gets to the position directly. How do I get the smooth transition when I move my cursor quick?

Here is the code:

HTML:

<table>
    <tr>
      <td>
        <a href="http://www.google.com" target="_blank">Google</a>
      </td>
    </tr>
  </table>

CSS:

td {
  /*animation*/
  transition:all 0.5s ease;
  transform:translate3d(0, 0, 0);
}

/*Element Animations*/
td:hover {
  transform: translateX(18px);
}

Answer 1

td a {
  /*animation*/
  transition:all 0.5s ease;
  transform:translate3d(0, 0, 0);
  margin-left:0px;

}

/*Element Animations*/
td a:hover {
  margin-left:18px;
}