如何在JavaScript中先执行Transform再执行Animation？问题求助

问题核心在于CSS动画的transform会直接覆盖行内样式的transform：当你通过JS设置transform: scale(1.2) rotate(360deg)后，元素本应执行过渡动画，但3秒后启动的spin动画会用自身关键帧里的transform值替换掉行内样式——而动画初始帧是rotate(0deg)，直接把之前的放大+旋转效果覆盖了，导致你看不到过渡的执行结果。

修改后的CSS代码 #

#item1 {
    transition: transform 3s ease-in-out;
    animation: spin 10s linear infinite;
    animation-play-state: paused;
}

@keyframes spin{
    0%{
        /* 继承元素当前的transform值，避免重置样式 */
        transform: inherit;
    }

    100%{
        /* 在继承的transform基础上继续旋转360度 */
        transform: inherit rotate(360deg);
    }
}

优化后的JavaScript代码 #

用transitionend事件监听过渡完成，比固定3秒的setTimeout更可靠（避免因浏览器性能等导致过渡时长不准）：

button.onclick = function () {
  item1.style.transform = "scale(1.2) rotate(360deg)";
  
  // 监听过渡结束事件
  item1.addEventListener('transitionend', function startSpin() {
    item1.style.animationPlayState = "running";
    // 移除事件监听，避免多次触发
    item1.removeEventListener('transitionend', startSpin);
  });
};

额外说明 #

• 动画关键帧里用inherit可以让动画基于元素当前的transform状态继续执行，不会重置之前的放大效果。
• 使用transitionend事件能精准捕捉过渡完成的时机，比硬编码的setTimeout更鲁棒。

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