SCSS：向混入内关键帧传递变量的云动画起始位置问题

嘿，这个问题我之前做云动画时也踩过坑！核心问题出在动画关键帧和云朵初始位置没有对齐——当你用SCSS混入时，如果动画的起始状态没有明确绑定每个云朵的$startpos，浏览器就会默认从元素的“初始计算位置”（可能不是你设置的right值）启动动画，看起来就像随机位置开始一样。

解决方案1：为每个云朵生成专属关键帧（最稳妥的SCSS方案） #

我们可以在混入里为每朵云生成唯一的关键帧，确保动画的起始状态完全匹配你设置的$startpos：

// 定义云朵动画混入，参数：初始right位置、动画时长、云朵宽度
@mixin cloud-animation($startpos, $speed, $cloud-width) {
  // 初始位置（和动画起始状态一致）
  position: absolute;
  right: $startpos;
  opacity: 0;
  
  // 生成唯一的关键帧名称，避免多个云朵动画冲突
  $unique-keyframe: cloud-move-#{unique-id()};
  
  @keyframes #{$unique-keyframe} {
    from {
      // 明确绑定初始位置，和元素默认样式完全一致
      right: $startpos;
      opacity: 0;
    }
    10% {
      // 淡入阶段
      opacity: 1;
    }
    90% {
      // 保持显示状态
      opacity: 1;
    }
    to {
      // 移动到页面左侧外，同时淡出
      right: -$cloud-width;
      opacity: 0;
    }
  }
  
  // 绑定专属动画
  animation: #{$unique-keyframe} $speed linear infinite;
}

// 使用示例：不同云朵传入不同参数
.cloud-1 {
  width: 150px;
  height: 80px;
  @include cloud-animation(100px, 20s, 150px);
}

.cloud-2 {
  width: 200px;
  height: 100px;
  @include cloud-animation(350px, 25s, 200px);
}

解决方案2：用CSS变量简化（更简洁，需兼容现代浏览器） #

如果你的项目不需要兼容老浏览器，可以用CSS变量让共用的关键帧读取每个云朵的专属位置，避免生成大量关键帧：

// 定义全局共用的关键帧
@keyframes cloud-move {
  from {
    right: var(--start-pos);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  to {
    right: var(--end-pos);
    opacity: 0;
  }
}

// 混入里传入变量值
@mixin cloud-animation($startpos, $speed, $cloud-width) {
  position: absolute;
  // 定义元素专属的CSS变量
  --start-pos: #{$startpos};
  --end-pos: -#{$cloud-width};
  
  // 初始位置和动画起始状态绑定
  right: var(--start-pos);
  opacity: 0;
  
  // 绑定共用动画
  animation: cloud-move $speed linear infinite;
}

// 使用方式和方案1一致
.cloud-3 {
  width: 180px;
  height: 90px;
  @include cloud-animation(600px, 30s, 180px);
}

为什么原来的代码会出问题？ #

• 如果你共用一个fadein关键帧，且关键帧的from状态没有明确指定right属性，浏览器会默认使用元素的“初始计算位置”，但有时候初始渲染和动画启动的微小延迟会导致位置偏差；
• 初始设置的right: $startpos和动画from的right状态不一致（哪怕你没写，浏览器的默认值可能不是你预期的），就会出现跳变效果。

最后别忘了给云朵的父容器设置position: relative，否则right属性不会生效哦！

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