CSS 动画留下杂散像素

Question

我正在尝试在我的导航栏 link 上实现简单的“悬停时下划线”动画。但是，动画在动画完成后会留下杂散像素，如下面的 GIF 所示。

Underline animation leaves stray pixel to the left

奇怪的是，如果我将光标悬停在具有相同动画的两个 link 之间，则不会发生这种情况。只有当我将光标悬停在 link 上然后将光标移到其他地方时才会发生。

The bug doesn't happen while hovering between navbar links

我已经实现了导航栏如下：-

<div class="nav-bar-flex">
      <a href="#">Home</a>
      <a href="#">Company</a>
      <a href="#">Careers</a>
</div>

CSS:

.nav-bar-flex a {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.055rem;
}

.nav-bar-flex > a::after {
     content: "";
     display: block;
     width: 0%;
     border-bottom: 2px var(--secondary-orange) solid;
     margin-top: 0.3rem;
     transition: width 300ms;
}

.nav-bar-flex > a:hover::after {
     width: 100%;
     transition: width 300ms;
}

Answer 1

为之后及其过渡添加不透明度

.nav-bar-flex a {
  display: inline-block;
   color: white;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 400;
   letter-spacing: -0.055rem;
 }

.nav-bar-flex > a::after {
  content: "";
  display: block;
  width: 0%;
  opacity: 0;
  border-bottom: 2px var(--secondary-orange) solid;
  margin-top: 0.3rem;
  transition: width 300ms, opacity 300ms;

}

 .nav-bar-flex > a:hover::after {
    width: 100%;
    opacity: 1;
   transition: width 300ms, opacity 300ms;
}

工作解决方案：https://codepen.io/aledebarba/pen/zYNzOrL

Answer 2

在我看来，anchor 标签上的 letter-spacing 属性导致渲染引擎出现某种计算错误，导致它留下杂散像素。

所以我想出了两个解决方案：

解决方案一：

像这样使用变换：

.nav-bar-flex > a::after {
     content: "";
     display: block;
     width: 100%;
     border-bottom: 2px var(--secondary-orange) solid;
     margin-top: 0.3rem;
     transition: transform 300ms;
     transform: scaleX(0);
     transform-origin: left;
}
.nav-bar-flex > a:hover::after {
     transform: scaleX(1);
}

方案二：

从 anchor 标签中删除 letter-spacing。

顺便说一句，由于您在实际元素上进行了转换，因此您不需要在悬停事件中再次进行转换。

CSS 动画留下杂散像素

CSS Animation leaves stray pixels behind

html

css

frontend

web-frontend

css-animations