关于在React App中编辑/编写SCSS级关键帧的建议？

Question

我一直坚持如何使用React中的JavaScript函数编辑@keyframes。

我在SCSS中使用的@keyframes有for循环和if语句，据我所知，Styled-Components不支持（或者至少我能找到的只是说它支持它CSS）：Styled-Components。

我无法使用JQuery，因为它显然会创建“反模式”。

React Animation Add-Ons页面似乎没有提及关键帧的任何内容：Animation Add-Ons。

有没有人知道如何编辑这样的东西。基本上我想要一种在JavaScript文件中编写/编辑任何类型的SCSS的方法。

如果没有办法做到这一点，有没有办法使用JavaScript使Styled-Components像SCSS一样有用。这是我的代码片段，所以你知道我试图用这两个代码复制什么样的代码：

@keyframes backgroundChange{

    @for $i from 0 through 900{

        $percentage: $i * 0.11111111111111111111111111111111111111;

        $angle1: 2 * pi() * $i / 900;
        $angle2: $angle1 - pi();

        $sin1: sin($angle1);
        $sin2: sin($angle2);

        $cos1: cos($angle1);
        $cos2: cos($angle2);

        $xLeftDisplacement: 25 + $cos1 * 12.5;
        $xLeftPercent: $xLeftDisplacement * 1%;

        $yLeftDisplacement: 25 + $sin1 * 12.5;
        $yLeftPercent: $yLeftDisplacement * 1%;

        $xRightDisplacement: 25 + $cos2 * 12.5;
        $xRightPercent: $xRightDisplacement * 1% + 50%;

        $yRightDisplacement: 25 + $sin2 * 12.5;
        $yRightPercent: $yRightDisplacement * 1% + 50%;

        #{$percentage * 1%} {   

            @if $i < 100 {

                background: radial-gradient(ellipse at $xLeftPercent $yLeftPercent, rgba(218.75,62.5 + $i * 0.625,62.5, 0.5), transparent),
                            radial-gradient(ellipse at $xRightPercent $yRightPercent, rgba(140,80 + $i * 0.4,40, 0.5), transparent);

                ...