使用 CSS Transition 设置边距和填充动画会导致动画跳动

Question

在我的 个人网站上，我在顶部导航栏上使用 CSS3 Transition 属性来为带有边框的元素的边距和填充设置动画，使边框在悬停时膨胀。

相关标记：

 <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:[phone]">
          <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;
}

看看它在做什么？通过减少边距并增加悬停时的填充，圆形边框有效地变大而不会改变它环绕的图像的位置。

它工作得很好，但问题是，如果我快速将鼠标从 EMAIL ME 移动到 CALL ME，反之亦然，在第一个动画完成之前，整个导航会上下“跳跃”大约一个像素。但是，这个问题不会发生在 CALL ME 和 SEE MY WORK 之间，这让我相信这是一个可以解决的问题。有任何想法吗？

原文由 dannymcgee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为问题是因为您正在转换边距（并使用总是有点不稳定的负边距）。

更流畅的解决方案可能是使用 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;
}

原文由 JustH 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

div {
  transition: all 0.5s ease;
  padding: 13px;
}

div:hover {
  padding: 23px;
}

要么

* { transition: all 0.5s ease; }

div {
  padding: 13px;
}

div:hover {
  padding: 23px;
}

原文由 DEV Tiago França 发布，翻译遵循 CC BY-SA 4.0 许可协议