Sass序列动画循环问题：如何实现锥形体反复显隐？

看起来你遇到的核心问题是动画只执行一轮，而且消失阶段还额外占用了一轮循环——这大概率是因为关键帧的逻辑没处理好交替的出现/消失状态，或者动画的循环配置没到位。我来帮你梳理下解决方案：

问题根源分析 #

你想要的是**“出现→消失→出现→消失…”**的永久循环，那整个动画周期应该包含两个阶段：「出现（50%时长）」+「消失（50%时长）」。如果原来的关键帧只定义了“出现”的过程，或者把消失的逻辑放到了下一轮循环里，自然会出现只跑一轮、消失滞后的情况。

具体实现方案 #

我们可以用Sass的循环同时生成「出现」和「消失」两个阶段的关键帧，再把动画设置为无限循环：

1. 定义核心变量
   先把动画的步数、单次时长这些参数抽成变量，方便后续调整：

$step-count: 12;       // 单次出现/消失的渐变步数
$single-phase-duration: 1.5s;  // 单个阶段（出现/消失）的时长
$total-cycle-duration: $single-phase-duration * 2;  // 完整循环（出现+消失）的总时长

2. 生成交替的关键帧
   用@for循环同时生成出现和消失的关键帧，把总时长的前50%分给出现，后50%分给消失：

@keyframes cone-pulse {
  // 生成「出现」阶段的关键帧（0% → 50%）
  @for $i from 0 through $step-count {
    $percent: $i / $step-count * 50%;
    #{$percent} {
      opacity: $i / $step-count;
      transform: scale($i / $step-count) translateY(0);
      // 这里替换成你原来锥形体出现的样式逻辑，比如路径、旋转等
    }
  }
  
  // 生成「消失」阶段的关键帧（50% → 100%）
  @for $i from 0 through $step-count {
    $percent: 50% + ($i / $step-count * 50%);
    #{$percent} {
      opacity: 1 - ($i / $step-count);
      transform: scale(1 - ($i / $step-count)) translateY(20px);
      // 对应消失的样式逻辑，和出现反向即可
    }
  }
}

3. 给锥形体元素绑定动画
   确保设置animation-iteration-count: infinite让动画永久循环，同时用linear保持匀速：

.cone-element {
  animation: cone-pulse $total-cycle-duration infinite linear;
  // 其他基础样式（比如锥形体的初始状态：opacity:0, transform:scale(0)）
}

为什么原来的代码会失效？ #

• 可能你只定义了「出现」的关键帧，消失的逻辑没有整合到同一个动画周期里，导致动画跑完一轮后停留在“出现”状态；
• 如果把消失的逻辑放到了下一轮循环的开头，就会出现“消失多耗一轮”的情况——因为第一轮只完成出现，第二轮才开始消失；
• 没设置animation-iteration-count: infinite，动画默认只执行一次。

这样调整后，动画就会按照「出现→消失→出现→消失」的逻辑永久循环啦～

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