如何将SVG SMIL线性渐变动画转换为CSS动画并补全@keyframes规则

原SMIL动画的核心逻辑为：渐变的三个色标在前25%（0.5s）总时长内保持静止，后75%（1.5s）匀速移动，形成亮条扫过的效果。CSS版本可以通过控制background-position实现同等效果，无需动态修改渐变色标，完整代码如下：

.shimmer {
  background: #cfcfcf;
  background-image: linear-gradient(to right, #cfcfcf 0%, #ecebeb 50%, #cfcfcf 100%);
  /* 渐变宽度设为元素的2倍，避免扫动过程中出现断层 */
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: placeholder;
}

@keyframes placeholder {
  /* 0%、25%状态一致，对应原SMIL前0.5s的静止逻辑 */
  0%, 25% {
    background-position: 200% 0;
  }
  /* 后1.5s渐变从右往左扫过元素，如需从左往右扫，可将两个位置值互换 */
  100% {
    background-position: -200% 0;
  }
}

如果需要调整扫动方向，仅需要调换0%和100%的background-position取值即可。 #

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