CSS 链接转换问题答案

【问题标题】：CSS Link Transition IssueCSS 链接转换问题
【发布时间】：2015-12-02 15:18:05
【问题描述】：

无论我将光标移到它上面的速度有多快，我都希望我的链接能够平稳过渡。这个问题在这个 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);
}

【问题讨论】：

首先在使用 CSS3 属性时总是使用 cross-browser CSS 并且你已经为它的普通视图设置了transition，添加@ :hover 上的 987654325@ 也可以正常工作。
@vivekkupadhyay：无需在:hover 上设置额外的transition 属性。通用的td 选择器适用于元素悬停和未悬停时。
@Xufox 它发生了十分之一。虽然不能完全重现。过渡有时有效，有时无效。只有当我们将光标缓慢移动到链接时才会发生这种情况。

标签： html css css-transitions

【解决方案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;
}

【讨论】：

它可以工作，但问题是在加载时按钮实际上会产生放大效果。