关键帧中的 SASS 变量不起作用

Question

我正在尝试使用一些 SASS 变量来更改 CSS 动画，但它似乎拒绝了我尝试的一切。我也尝试过将其格式化为 mixin，但没有成功。$waitTime 和 $fadeTime 分别初始化为 4.5 和 .5，远高于以下代码片段：

        @keyframes fadeLoop{
            0%{
                height: auto;
                transform: translate(-10%, 0);
                opacity: 1;
            }
            (($waitTime/(($waitTime + $fadeTime)*10))*100) + %{
                transform: translate(10%, 0);
                opacity: 1;
            }
            ((($waitTime + $fadeTime)/(($waitTime + $fadeTime)*10))*100) + %{
                height: 0;
                overflow: hidden;
            }

            100%{

            }
        }

给出的错误是：

Error: Invalid CSS after "": expected keyframes selector (e.g. 10%), was "(($waitTime/(($..."
        on line 131 of /Users/CyrusRoshan/GitHub/Active/CS2-Redesign/css/style.scss

126:                0%{
127:                    height: auto;
128:                    transform: translate(-10%, 0);
129:                    opacity: 1;
130:                }
131:                (($waitTime/(($waitTime + $fadeTime)*10))*100) + %{
132:                    transform: translate(10%, 0);
133:                    opacity: 1;
134:                }
135:                ((($waitTime + $fadeTime)/(($waitTime + $fadeTime)*10))*100) + %{
136:                    height: 0;

Answer 1

你有两个问题。

• 您需要在关键帧百分比中使用插值
• 您将数字转换为百分比的方式不正确

$waitTime: 4.5;
$fadeTime: .5;

@keyframes fadeLoop{
    0%{
        height: auto;
        transform: translate(-10%, 0);
        opacity: 1;
    }
    #{(($waitTime/(($waitTime + $fadeTime)*10))*100%)} {
        transform: translate(10%, 0);
        opacity: 1;
    }
    #{((($waitTime + $fadeTime)/(($waitTime + $fadeTime)*10))*100%)} {
        height: 0;
        overflow: hidden;
    }

    100%{

    }
}