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