Html 使用 CSS Transition 设置边距和填充动画会导致动画跳动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28203411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animating margins and padding with CSS Transition causes jumpy animation
提问by dannymcgee
At my personal website, I'm using the CSS3 Transition property on the top nav to animate the margins and padding of an element with a border, to make the border swell on hover.
在我的个人网站上，我使用顶部导航上的 CSS3 Transition 属性来为带有边框的元素的边距和填充设置动画，以使边框在悬停时膨胀。
Relevant markup:
相关标注：
<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:
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;
}
See what it's doing? By decreasing the margins and increasing the padding on hover, the circular border effectively gets bigger without altering the position of the image it's wrapped around.
看看它在做什么？通过减少边距和增加悬停时的填充，圆形边框有效地变大而不改变它所环绕的图像的位置。
It works pretty well, but the problem is that if I quickly move the mouse from EMAIL ME to CALL ME and vice versa, before the first animation completes, the whole nav "jumps" up and down by about a pixel. However, this issue doesn't happen between CALL ME and SEE MY WORK, which leads me to believe it's an issue that can be fixed. Any ideas?
它工作得很好，但问题是如果我快速将鼠标从 EMAIL ME 移动到 CALL ME，反之亦然，在第一个动画完成之前，整个导航会上下“跳跃”大约一个像素。但是，这个问题不会发生在 CALL ME 和 SEE MY WORK 之间，这让我相信这是一个可以解决的问题。有任何想法吗？
回答by JustH
I believe the issue is because you are transitioning the margins (and using negative margins which is always a little wonky).
我相信这个问题是因为你正在转换边距（并且使用负边距，这总是有点不稳定）。
A smoother solution might be using transform: scale(x)
一个更顺畅的解决方案可能正在使用 transform: scale(x)
someting like:
有点像：
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;
}
回答by fcastillo
Maybe this works:
也许这有效：
header nav a {
display: inline-block;
}
