使用CSSTransition动画边距和填充会导致跳动动画

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

相关标记:

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之间不会发生这个问题,这让我相信这是一个可以解决的问题.有任何想法吗？

我认为这个问题是因为你正在转移边距(并使用负边距,这总是有点不稳定).

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