加载骨架UI替代background-position方案：解决Lighthouse属性不支持问题

问题背景 #

Google Lighthouse检测提示「不支持的CSS属性：background-position-x、background-position-y」，当前用Skeleton UI实现资源加载占位效果，原代码通过background-position动画实现渐变扫过的效果，但按照web.dev动画指南建议，需改用transform属性优化性能，同时要保持原动画的视觉表现（渐变条从左至右扫过占位块）。

原CSS代码：

.sc-skeleton {
  background-color: $gray-ten;
  background-image: linear-gradient(90deg, $gray-ten, $gray-eight, $gray-ten);
  background-repeat: no-repeat;
  background-size: 200px 100%;
  display: block;
  line-height: 1;
  width: 100%;
  border-radius: 2px;
  margin-bottom: 8px;
  animation: sc-skeleton-loading 1.8s ease-in-out 5;
}

@keyframes sc-skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

解决方案：用transform重写动画 #

通过伪元素承载渐变背景，对伪元素应用transform: translateX()动画，既满足性能优化要求，又能完全还原原动画效果：

修改后的CSS代码：

.sc-skeleton {
  background-color: $gray-ten;
  display: block;
  line-height: 1;
  width: 100%;
  border-radius: 2px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden; /* 限制伪元素不超出容器范围 */
}

.sc-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(90deg, $gray-ten, $gray-eight, $gray-ten);
  background-repeat: no-repeat;
  background-size: 200px 100%;
  animation: sc-skeleton-loading 1.8s ease-in-out 5;
}

@keyframes sc-skeleton-loading {
  0% {
    transform: translateX(-100%); /* 初始位置在容器左侧外部 */
  }
  100% {
    transform: translateX(calc(100% + 200px)); /* 结束位置在容器右侧外部，匹配原动画位移距离 */
  }
}

代码说明 #

• 将渐变背景从主元素转移到伪元素，主元素仅保留基础样式和定位上下文
• transform: translateX()属于浏览器合成层动画，性能远优于background-position动画，不会触发Lighthouse的属性不支持警告
• 动画起始/结束位置通过计算保证和原效果完全一致，渐变条宽度维持200px，扫过整个容器后移出右侧

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