如何为CSS骨架屏（Skeleton）添加动画效果？

给骨架屏添加动画最常用的是扫光效果，模拟内容加载时的动态感，具体实现步骤如下：

修改后的完整代码 #

CSS

.card:empty {
  height: 40rem;
  background-image: 
    linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),
    linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),
    linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),
    linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),
    linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),
    /* 新增动画用的渐变遮罩 */
    linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  background-size: 
    25% 15px,85% 20px,83% 20px,85% 20px,83% 20px,90% 15px,92% 15px,87% 15px,
    93% 15px,20% 15px,40% 15px,40% 15px,25% 15px,
    /* 对应遮罩的尺寸：覆盖整个容器 */
    100% 100%;
  background-position: 
    0 0, 0 60px,0 95px,0 130px,0 165px,0 220px,0 250px,0 280px,0 310px,
    0 350px,40% 350px,0 380px,60% 380px,
    /* 遮罩初始位置：容器左侧外部 */
    -100% 0;
  background-repeat: no-repeat;
  /* 添加动画 */
  animation: skeleton-loading 1.5s infinite linear;
}

/* 定义扫光动画关键帧 */
@keyframes skeleton-loading {
  to {
    /* 遮罩移动到容器右侧外部 */
    background-position: 
      0 0, 0 60px,0 95px,0 130px,0 165px,0 220px,0 250px,0 280px,0 310px,
      0 350px,40% 350px,0 380px,60% 380px,
      100% 0;
  }
}

HTML

<div class="card"></div>

实现说明 #

• 在原有background-image的最后添加一个横向的渐变遮罩（透明→半透明白色→透明），作为扫光的动态层
• 更新background-size和background-position，确保遮罩层能覆盖整个骨架容器，初始时隐藏在容器左侧
• 通过animation属性绑定自定义动画，设置循环播放、时长和线性运动速度
• 关键帧动画中只需要修改遮罩层的background-position，让它从左向右穿过整个骨架屏，形成扫光效果

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