html - CSS 链接转换问题

Question

无论我将光标移到链接上的速度有多快，我都希望我的链接能够平滑过渡。这个问题在这个 plunkr 中得到了证明:

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