[英]CSS Link Transition Issue
I want my link to have a smooth transition no matter how fast I move my cursor over it. 我希望我的链接能够平稳过渡,无论我将光标移到链接上有多快。 And the problem is demonstrated in this plunkr:
问题在此插件中得到了证明:
http://plnkr.co/edit/UPEdxjWIT4y12RbqRo9a?p=info http://plnkr.co/edit/UPEdxjWIT4y12RbqRo9a?p=info
Here is the problem: if I hover over the link slowly, it works fine. 这是问题所在:如果我将鼠标慢慢悬停在链接上,则可以正常工作。 However, if you move your cursor quickly to the link, the smooth transition is gone and the link just gets to the position directly.
但是,如果将光标快速移动到链接,则平滑过渡消失了,链接仅直接到达该位置。 How do I get the smooth transition when I move my cursor quick?
快速移动光标时如何获得平滑过渡?
Here is the code: 这是代码:
HTML: HTML:
<table>
<tr>
<td>
<a href="http://www.google.com" target="_blank">Google</a>
</td>
</tr>
</table>
CSS: CSS:
td {
/*animation*/
transition:all 0.5s ease;
transform:translate3d(0, 0, 0);
}
/*Element Animations*/
td:hover {
transform: translateX(18px);
}
td a {
/*animation*/
transition:all 0.5s ease;
transform:translate3d(0, 0, 0);
margin-left:0px;
}
/*Element Animations*/
td a:hover {
margin-left:18px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.