关键帧中的SASS变量不起作用 [英] SASS variables in keyframes not working

问题描述

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

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

            }
        }

给出的错误是：

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;

推荐答案

您有2问题。

• 您需要在关键帧百分比中使用插值


• 您将数字错误地转换为百分比

$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变量不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！