css如何动态修改keyframes

最近做了一个上线滚动文字的走马灯组件，通过关键帧@keyframes at-rule 来定义滚动； 由于我的数目是动态的，个数不定，所以需要动态计算左移的长度。

整体思路:

• 在样式中不指定 animation-name,通过 js 操作样式属性设置，这样生成 keyframes 时，就不用去获取打包生成的名字。
• 样式直接插入最后的 styleSheets 中
• 在 js 中指定 animationName等属性

// 在全局定义名字
function createKeyFrames(props) {
    const { name = "", count = "" } = props;
    const length = `${name} + 我拥有的优惠券数量为: ${count}张专属券`.length * 12;
    const keyframes = `
    @keyframes  talentPreLiminaryMoveToLeft {
    0% {
    position: absolute;
    left: 0;
    top: 0;
    }

    100% {
    position: absolute;
    left: -${length}px;
    top: 0;
    }
    }
    `;

    const keyframesWebdit = `
    @-webkit-keyframes  talentPreLiminaryMoveToLeft {
    0% {
    position: absolute;
    left: 0;
    top: 0;
    }

    100% {
    position: absolute;
    left: -${length}px;
    top: 0;
    }
    }

        `;
    const styleSheet = document.styleSheets[document.styleSheets.length - 1];
    styleSheet.insertRule(keyframes, styleSheet.rules.length);
    styleSheet.insertRule(keyframesWebdit, styleSheet.rules.length);
}

// jsx

 <div
          className={`demo`}
          style={{
            animationName: "talentPreLiminaryMoveToLeft",
            animationDuration: "3s",
            animationTimingFunction: "linear",
          }}
        >
</div>
...

可以尝试一下，使用动态插入 style 标签到 head 中是无效的。