SCSS混合宏动画未正常生效：汉堡菜单关闭动画异常

你遇到的问题是重复定义了同名关键帧：每次调用bar-rotation混合宏时，都会生成名为bar-rotation的关键帧，后定义的（对应-45deg）会覆盖先定义的（45deg），导致两个条都使用了最后那个关键帧的旋转角度，所以方向一致。

修改混合宏，为每个生成的关键帧创建唯一名称，避免覆盖。可以利用传入的角度参数作为关键帧名称的一部分：

@mixin bar-rotation($deg){
    // 生成带角度参数的唯一关键帧名称
    $keyframes-id: bar-rotation-#{$deg};
    @keyframes #{$keyframes-id} {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate($deg);
        }
    }

    animation-name: #{$keyframes-id};
    animation-timing-function: linear;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.bar-first-transformed {
    @extend .bar-first;
    @include bar-rotation(45deg);
}

.bar-third-transformed {
    @extend .bar-third;
    @include bar-rotation(-45deg);
}

编译后会生成两个独立的关键帧（bar-rotation-45deg和bar-rotation--45deg），两个条的动画就会各自使用对应的旋转角度，方向相反。

如果不需要复杂的关键帧控制，也可以用transition实现更简洁的效果，避免关键帧冲突：

@mixin bar-rotation($deg){
    transition: transform 0.2s linear;
    transform: rotate($deg);
}

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