Sass混合宏问题：translateX与translateY动画无法生效

云原生阿岚

2026-5-29

问题分析与修复方案

你遇到的问题根源是Sass混合宏里的CSS语法错误，导致浏览器无法解析transform属性，自然位移动画就失效了。咱们来一步步拆解：

错误点定位

看你混合宏里的这段代码：

transform: #{$axis}(#{$start});

当Sass编译后，这段代码会变成类似 transform: translateX(0}); 的无效CSS——这里多了一个闭合大括号}，完全破坏了transform的语法结构，浏览器会直接忽略这个错误的属性声明，所以只有透明度动画能正常运行，位移效果根本没被应用。

修正后的完整代码

我不仅修正了语法错误，还把代码格式化了（多行缩进），这样后续排查问题会更方便：

SCSS代码

@mixin keyframes($animation-name, $axis, $start, $end) {
  @keyframes #{$animation-name} {
    0% {
      opacity: 0;
      transform: #{$axis}(#{$start}); // 修正了括号闭合错误
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: #{$axis}(#{$end}); // 同样修正此处的括号
    }
  }
}

@include keyframes(slideLeft, translateX, 0, 200px);

.slide-left {
  animation: slideLeft 2s ease .1s forwards;
}

.redbox {
  opacity: 0;
  height: 100px;
  width: 100px;
  background: red;
}