我会将你的背景声明转换为mask，然后添加一个背景动画：

.card:empty {
  height: 40rem;
  
  --g: linear-gradient(#000 0 0) no-repeat;
  -webkit-mask: var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g);
  -webkit-mask-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;
  -webkit-mask-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;
  
  background: linear-gradient(-60deg, #ccc 33%,#ddd, #ccc 66%) right/300% 100%;
  animation: move 1s linear infinite;
}

@keyframes move {
  to {background-position: left}
}

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

有关背景动画的更多详细信息，请参见：Responsive shine animation using linear-gradient as background

我已经创建了名为skeleton的@keyframes，它将0%和100%上的opacity属性更改为1。50%上的0。另外，不要忘记声明animation属性。
这是你的最终代码：

.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);
    animation: skeleton 2s infinite;
    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;
    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;
    background-repeat: no-repeat;
}

@keyframes skeleton {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

您可以随意调整动画以更好地满足您的需要。