如何实现Web应用中元素的平滑CSS背景加载动画？

你的原动画是直接切换两个渐变的颜色顺序，这种方式会让过渡显得生硬，因为浏览器是在两个独立渐变之间插值。要实现浅色区域从一侧平滑移动到另一侧的效果，推荐用背景位置平移的思路，以下是两种可行方案：

方案一：亮色滑块滑动效果 #

适合需要突出一条亮色区域划过的场景，基础底色固定，亮色条平滑移动：

/* 给需要加载动画的元素添加这个类 */
.loading-skeleton {
  /* 基础背景色，和深色一致 */
  background-color: #282933;
  /* 创建透明-亮色-透明的渐变，宽度设为200%，预留滑动空间 */
  background-image: linear-gradient(
    to right,
    transparent 0%,
    #363644 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  /* 线性动画，无限循环 */
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    /* 初始位置：亮色条在元素左侧外 */
    background-position: -100% 0;
  }
  100% {
    /* 结束位置：亮色条滑到元素右侧外 */
    background-position: 100% 0;
  }
}

原理：通过将渐变背景的宽度设为元素的200%，然后平移背景位置，让中间的亮色区域从左到右平滑划过元素，视觉上就是浅色条持续移动的加载提示。

方案二：双色渐变整体滑动效果 #

如果需要保留两种底色的过渡感，让整个渐变带滑动：

.loading-skeleton {
  /* 创建深色-亮色-深色的渐变，宽度设为200% */
  background: linear-gradient(
    to right,
    #282933,
    #363644,
    #282933
  );
  background-size: 200% 100%;
  animation: slide 2s infinite linear;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

原理：渐变包含重复的深色段，背景尺寸设为200%后，平移背景位置时，亮色区域会自然从左到右移动，循环时因为渐变首尾都是深色，所以不会出现突兀的颜色跳转。

注意事项 #

• 不要直接给body加这个动画，建议给需要加载的具体元素（比如卡片、列表项）添加类，避免影响全局样式。
• 可以调整动画时长（比如1.5s）或者timing-function（比如ease-in-out）来适配你的视觉需求。

内容的提问来源于stack exchange，提问作者Hanus á Tjaldrafløtti