应使用类名切换而非animation-play-state控制旋转，因后者会导致跳帧和safari兼容问题；通过classlist.toggle()同步音频播放状态与rotating类，并配合canplay事件确保加载完成后再启用交互。

直接用 CSS 动画 + audio 元素的播放/暂停状态控制旋转，比 JS 操控 transform 更可靠，也更轻量。

为什么不能只靠 animation-play-state 切换旋转？

很多人试过给唱片元素加 animation: spin 10s linear infinite，再用 JS 切换 animation-play-state: paused/running —— 看似合理，但实际会遇到两个硬伤：

• 暂停时动画时间轴冻结，resume 后继续从冻结点走，导致视觉上“跳帧”，尤其在快速启停时明显
• 部分 Safari 版本对 animation-play-state 的响应有延迟或不触发重绘，旋转卡住不动

更稳的做法是：用 JS 控制类名切换，CSS 中用不同 animation 声明分别定义“旋转中”和“静止”状态，强制重置动画时间轴。

如何用 classList.toggle() 同步控制播放与旋转？

核心逻辑是让按钮点击同时触发两件事：音频的 play()/pause()，以及唱片容器的旋转类切换。关键点在于处理 paused 属性而非监听事件：

• 不要监听 play 或 pause 事件来反向更新 UI —— 它们可能因自动播放策略、用户手势缺失而被拦截，导致状态错位
• 每次点击按钮时，先读取 audio.paused，再决定调用 play() 还是 pause()，并同步操作类名
• 唱片容器（比如 <div class="record">）只需绑定一个 <code>rotating 类，CSS 里用 @keyframes 定义完整旋转周期

  示例片段：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  const audio = document.querySelector('audio');
  const record = document.querySelector('.record');
  const playBtn = document.querySelector('#play-btn');
  
  playBtn.addEventListener('click', () => {
    if (audio.paused) {
      audio.play().catch(e => console.warn('Playback failed:', e));
      record.classList.add('rotating');
    } else {
      audio.pause();
      record.classList.remove('rotating');
    }
  });

  @keyframes spin 的性能与兼容性细节

  旋转动画看似简单，但几个参数直接影响流畅度和设备适配：

  • 用 transform: rotateZ(360deg)，不是 rotate(360deg) —— 显式指定 Z 轴能更好触发 GPU 加速
  • 动画时长建议设为可被 60 整除的值（如 6s、12s），避免帧率抖动；太慢（如 30s）在低帧率设备上易感知卡顿
  • 必须加 will-change: transform 到唱片元素上，否则 iOS Safari 可能降级为 CPU 渲染，发热+掉帧
  • 不要用 animation-timing-function: steps(1) 模拟“机械感”旋转——它会让动画变成离散跳变，失去唱片应有的匀速感

  CSS 示例：

  .record {
    will-change: transform;
  }
  
  .record.rotating {
    animation: spin 8s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotateZ(0deg); }
    to   { transform: rotateZ(360deg); }
  }

  音频加载完成前，旋转状态怎么处理？

  用户点播放按钮时，如果 audio.readyState （即还没加载完元数据或首帧），<code>play() 会失败，但类名可能已加上，造成“假旋转”。必须拦截并回退：

  • 监听 canplay 和 canplaythrough 事件，在它们触发后才允许用户交互（比如移除按钮的 disabled 状态）
  • 在 play().catch() 中不仅打日志，还要立刻执行 record.classList.remove('rotating')
  • 如果音频源是动态设置的（比如 audio.src = url），记得在赋值后手动调用 audio.load()，否则 readyState 不会更新

  这点容易被忽略：很多“旋转不启动”的问题，根源其实是音频没真正加载成功，而不是动画写错了。