CSS Link 过渡问题

Question

我希望我的 link 能够平稳过渡，无论我将光标移到它上面的速度有多快。这个问题在这个 plunkr 中得到了证明：

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

这是问题所在：如果我将鼠标悬停在 link 上，它可以正常工作。但是，如果您将光标快速移动到 link，平滑过渡就消失了，link 直接到达该位置。如何在快速移动光标时实现平滑过渡？

代码如下：

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

CSS Link 过渡问题

CSS Link Transition Issue

html

css

css-transitions