[英]Animating margins and padding with CSS Transition causes jumpy animation
在我的个人网站上,我使用顶部导航上的 CSS3 过渡属性来为带有边框的元素的边距和填充设置动画,以使 hover 上的边框膨胀。
相关标记:
<nav>
<a class="email" href="mailto:notmyrealemailaddress">
<div class="icon-border">
<img src="images/mail_icon.png" width="14" height="12">
</div>Email Me</a>
<a class="phone" href="tel:4075555555">
<div class="icon-border">
<img src="images/phone_icon.png" width="11" height="18">
</div>Call Me</a>
<a class="behance" href="http://behance.net/dannymcgee" target="_blank">
<div class="icon-border">
<img src="images/behance_icon.png" width="21" height="13">
</div>See My Work</a>
</nav>
CSS:
header nav .icon-border {
display: inline-block;
border: 2px solid #000;
border-radius: 30px;
padding: 5px;
margin: 0 10px;
transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}
header nav a:hover .icon-border {
padding: 10px;
margin: -10px 5px;
border: 2px solid #ddd;
transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}
看看它在做什么? 通过减少边距并增加 hover 上的填充,圆形边框实际上变得更大,而不会改变它所环绕的图像的 position。
它工作得很好,但问题是,如果我将鼠标从 EMAIL ME 快速移动到 CALL ME,反之亦然,在第一个 animation 完成之前,整个导航“上下跳跃”大约一个像素。 但是,这个问题不会在 CALL ME 和 SEE MY WORK 之间发生,这让我相信这是一个可以解决的问题。 有任何想法吗?
我认为这个问题是因为你正在转移边距(并使用负边距,这总是有点不稳定)。
更平滑的解决方案可能是使用transform: scale(x)
喜欢:
header nav .icon-border {
display: inline-block;
border: 2px solid #000;
border-radius: 30px;
padding: 5px;
margin: 0 10px;
transform: scale(1); /* you need a scale here to allow it to transition in both directions */
transition: 0.15s all ease;
}
header nav a:hover .icon-border {
transform: scale(1.2);
border: 2px solid #ddd;
}
也许这有效:
header nav a {
display: inline-block;
}
div {
transition: all 0.5s ease;
padding: 13px;
}
div:hover {
padding: 23px;
}
或者
* { transition: all 0.5s ease; }
div {
padding: 13px;
}
div:hover {
padding: 23px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.