修复SCSS循环@keyframes实现SVG硬币指定路径动画问题

嘿，我来帮你搞定这个SCSS硬币下落动画的问题！你遇到的@keyframes循环无效，大概率是因为没给每个硬币生成独立的关键帧规则，导致所有硬币共享同一个关键帧，没法正确读取各自的目标位置映射。下面是具体的修正方案：

第一步：确认目标位置映射的结构 #

先确保你的$translateMyCoin是按索引对应每个硬币的，20个硬币就从0到19（如果索引是1到20，后面循环对应调整即可）：

// 示例：20个硬币的目标位置映射
$translateMyCoin: (
  0: translate(20px, 50px),
  1: translate(80px, 120px),
  2: translate(150px, 80px),
  // ... 继续补充剩下17个硬币的位置
);

第二步：修正@keyframes的循环写法 #

要为每个硬币生成唯一命名的关键帧，这样每个硬币的动画目标位置才会精准对应到映射里的值：

// 循环生成20个独立的关键帧
@for $i from 0 through 19 {
  @keyframes coin-fall-#{$i} {
    0% {
      transform: translate(0, -100px); // 初始位置：上方100px处
      opacity: 0; // 初始透明状态
    }
    10% {
      opacity: 1; // 下落启动后显示硬币
    }
    100% {
      transform: map-get($translateMyCoin, $i); // 读取对应索引的目标位置
      opacity: 1;
    }
  }
}

第三步：给每个硬币元素绑定对应的动画 #

接下来在样式循环里，把每个硬币和它专属的关键帧绑定起来（注意:nth-child是从1开始计数的，所以要给$i加1）：

// 给每个.coin元素应用对应的下落动画
.coin {
  position: absolute; // 确保硬币能自由定位
  @for $i from 0 through 19 {
    &:nth-child(#{$i + 1}) {
      animation: coin-fall-#{$i} 1.8s ease-in-out forwards;
      animation-delay: #{$i * 0.08}s; // 可选：添加小延迟，让硬币依次下落更自然
    }
  }
}

为什么之前的写法无效？ #

之前的循环写法可能是用了同一个@keyframes名称（比如所有硬币都用coin-fall），SCSS编译后会覆盖关键帧规则，导致所有硬币都用最后一个循环的目标位置，或者根本没法正确读取映射值。现在每个硬币有自己的关键帧，就能精准对应$translateMyCoin里的位置了。

额外注意事项 #

• 确保你的SVG里的硬币元素都带有.coin类，并且是同级的兄弟元素，这样:nth-child才能正确选中每个硬币。
• 如果你的$translateMyCoin索引是从1到20，那循环要改成@for $i from 1 through 20，同时&:nth-child(#{$i})即可。
• 动画时长、缓动函数、延迟时间都可以根据需求调整成变量，方便统一维护。

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