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