使用CSS transform处理链接时出现抖动异常的原因咨询

嘿，我来帮你搞定这个问题！先从你遇到的跳动问题说起，再给你讲清楚backface-visibility:hidden的用法~

为什么会出现跳动？ #

你碰到的文本跳动，核心原因是过渡动画的起始状态不明确：你只在:hover/:active状态设置了transform: translateY(-3px)，但默认状态下transform是默认值none，浏览器在计算过渡回退时，可能因为渲染引擎的细微差异出现“跳帧”；另外，硬件加速的开启/关闭切换也可能导致视觉上的跳动感。

快速修复方案 #

给默认状态的.nav__link添加初始的transform值，让过渡有明确的起点和终点：

.nav__link:link, .nav__link:visited {
  /* 保留你原有的所有属性 */
  text-decoration: none;
  font-size: 1.4rem;
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
  display: block;
  transition: all .2s;
  /* 添加这行，明确初始变换状态 */
  transform: translateY(0);
}

这样动画就会在translateY(0)和translateY(-3px)之间平滑过渡，不会再出现跳动了。

另外，你还可以加一行will-change: transform，提前告诉浏览器要做变换优化，进一步减少渲染波动：

.nav__link:link, .nav__link:visited {
  /* ...其他属性 */
  will-change: transform;
}

关于backface-visibility:hidden的疑问 #

这个属性主要用于3D变换场景，它控制元素旋转后，背面是否可见。比如你用rotateY(180deg)翻转元素时，默认能看到元素的背面（其实是镜像效果），设置backface-visibility:hidden就会把背面隐藏起来。

它的用法很简单，直接给目标元素加就行：

.element {
  backface-visibility: hidden;
}

那它能解决你的问题吗？有时候开启硬件加速的元素可能因为渲染层问题出现闪烁/跳动，backface-visibility:hidden会强制浏览器创建新的渲染层，间接触发硬件加速，从而缓解这类问题。不过对你的场景来说，设置初始transform值是更直接、更合适的解决方案，backface-visibility属于“偏方”级修复，不是首选。

优化后的完整CSS代码 #

.nav { 
  list-style: none; 
  padding: 4rem; 
  background-color: #101d2c; 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); 
  grid-gap: 2rem; 
  align-items: center; 
}
.nav__link:link, .nav__link:visited { 
  text-decoration: none; 
  font-size: 1.4rem; 
  font-family: 'Josefin Sans', sans-serif; 
  color: #fff; 
  text-transform: uppercase; 
  text-align: center; 
  padding: 1.5rem; 
  display: block; 
  transition: all .2s; 
  transform: translateY(0); /* 明确初始变换 */
  will-change: transform; /* 优化渲染 */
}
.nav__link:active, .nav__link:hover { 
  background-color: rgba(255, 255, 255, .05); /* 注意：原生CSS不支持rgba(#fff, .05)，要转成rgb值 */
  transform: translateY(-3px); 
}

小提醒：你的原CSS里rgba(#fff, .05)是Sass语法，如果用原生CSS的话，要改成rgba(255,255,255,.05)，不然浏览器识别不了哦！

内容的提问来源于stack exchange，提问作者Abdul Wahab