SASS variables in keyframes not working

问题

I am trying to use some SASS variables to change a CSS animation, but it seems to be rejecting everything I try. I've tried formatting it as a mixin, too, but without success. $waitTime and $fadeTime are initialized to 4.5 and .5 respectively, much farther above the following snippet:

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

            }
        }

The error given is:

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;

回答1:

You have 2 problems.

• You need to use interpolation in the keyframes percentage
• You're converting your number to a percentage improperly

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

    }
}

来源：https://stackoverflow.com/questions/31084281/sass-variables-in-keyframes-not-working