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%{

    }
}

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

1 个答案: