insertRule 规则无法注入的 我是这样解决的：

var style = document.styleSheets[0];

style.insertRule(`@keyframes run {100%{transform:translateX(-${contentWidth}px);}} `)
把这个删了，在marquee.css里面把动画帧加上就得了：
@keyframes run {
    100%{
        transform:translateX(-2400px);
    }
}

$(() => {
    console.log("页面加载完执行");
    var style = document.styleSheets[0];//获取页面加载样式表
    // 查找元素
    var $marquee = $('.marquee');
    var $content = $marquee.find('.content');//找到类名为content的元素
    var $list = $content.find('.list');//找到类名为list的元素
    var outerWidth = 300, outerHeight = 327, speed = 4;
    var listlength = $list.length;//list的个数
    var contentWidth = outerWidth * listlength;//content的宽度
    // js设置 marquee的css样式
    $marquee.css({
        "width": `${outerWidth}px`,
        "height": `${outerHeight}px`
    });
    //js设置 content的css样式
    $content.css({
        'width': `${contentWidth}px`,//设置宽度
        'height': `${outerHeight}px`,
        'animation': `run ${speed * listlength}s linear infinite`
    });
    //js设置 list的css样式
    $list.css({
        'width': `${outerWidth}px`,
        'height': `${outerHeight}px`
    });
    // 给样式表注入一个规则
    style.insertRule(`
        @keyframes run {
            100% {
                transform: translateX(-${contentWidth}px);
            }
        }
    `)
})

整理了一下格式，尝试了一下是没有问题的呀。

请题主给些别的信息。