JS设置CSS变量--item-width后跑马灯动画不生效如何解决

你的CSS自定义属性不生效核心是CSS语法书写错误，另外还有几处逻辑/规范问题，按下面改就能正常运行：

• 核心错误：关键帧内transform属性写法不合法
  你当前写的transform: translate3d(-(var(--item-width))'px', 0, 0);存在语法问题：CSS值里不允许用单引号包裹单位，也不能直接把px写在变量括号外面当字符串拼接，这会导致整行transform被浏览器直接判定为无效规则丢弃，不管JS怎么给--item-width赋值都不会生效。
  修复逻辑：要么JS赋值时直接给变量带上长度单位，要么CSS里用calc()计算拼接单位，删掉所有多余的单引号。
• 次要问题：动画参数冲突
  你给动画同时写了forwards和infinite两个参数，forwards的作用是动画单次运行结束后停在最后一帧，和无限循环的infinite逻辑冲突，同时写时forwards会被浏览器忽略，虽然不影响当前效果，但属于无效参数可以删掉。
• 其他规范隐患（不影响当前效果但建议修改）
  • for循环里的计数变量i没有声明，会泄露为全局变量，加上let声明即可
  • setTimeout里写this.move()属于多余写法，非严格模式下虽然能跑，但严格模式下全局this为undefined会直接报错，直接调用move()即可
  • 克隆节点时写的!0就是true，直接写true可读性更好

修复后对应代码片段 #

CSS部分 #

@keyframes marquee-text-ani {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* 用calc做负向计算，变量已经带px单位直接用即可 */
    transform: translate3d(calc(-1 * var(--item-width)), 0, 0);
  }
}

JS部分 #

setTimeout(()=>{
    move()
}, 200)

function move() {
    const $marqueeTop = document.querySelector(".marquee-text__wrapper");
    const $marqueeTopItem = document.querySelector(".marquee-text__wrapper>div");
    const $root = document.querySelector(":root");
    const itemWidth= $marqueeTopItem.clientWidth;
    
    // 给i加let声明，避免全局污染
    for (let i = 0; i < 10; i++) {
        let marqueeTopItem = $marqueeTopItem.cloneNode(true);
        $marqueeTop.appendChild(marqueeTopItem);
    }
    
    // 赋值自定义属性时直接携带px单位
    $root.style.setProperty('--item-width', `${itemWidth}px`);
    // 去掉冲突的forwards参数
    $marqueeTop.style.animation = `marquee-text-ani 4s linear 1s infinite`;
}

内容的提问来源于stack exchange，提问作者goodcontext