CSS链接转换问题

Question

无论我将光标移到它上面多快，我希望我的链接能够平滑过渡。这个问题在这个问题上得到了证明：

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

问题是：如果我慢慢地将鼠标悬停在链接上，它就能正常工作。但是，如果将光标快速移动到链接，则平滑过渡将消失，链接将直接到达位置。当我快速移动光标时，如何获得平滑过渡？

以下是代码：

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;
}