Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

$(()=>{

var outerWidth = 600,

outerHeight = 400,

speed = 3;

var $marquee = $('.marquee');

var $content = $marquee.find('.content');

var $list = $content.find('.list');

var listLength = $list.length;

var contentWidth = outerWidth * listLength;

var style = document.styleSheets[0]

// console.log('style',style);

$marquee.css({

"width":`${outerWidth}px`,

"height":`${outerHeight}px`,

});

$list.css({

"width":`${outerWidth}px`,

"height":`${outerHeight}px`,

});

$content.css({

"width":`${contentWidth}px`,

"height":`${outerHeight}px`,

"animation": `lunbo ${speed*listLength}s linear infinite;`

});

style.insertRule(`@keyframes lunbo{

           100%{

               transform: translateX(-${contentWidth}px);

           }

       }`)

});