如何访问@keyframes选择器并捕捉元素旋转至指定角度的时机

一、读取@keyframes的关键帧值 #

要获取@-webkit-keyframes spin里的规则内容，可以通过遍历页面样式表实现：

// 遍历所有样式表
for (let sheet of document.styleSheets) {
  try {
    // 遍历当前样式表的所有规则
    for (let rule of sheet.cssRules) {
      // 匹配webkit关键帧且名称为spin的规则
      if (rule.type === CSSRule.WEBKIT_KEYFRAMES_RULE && rule.name === 'spin') {
        // 遍历关键帧的各个百分比节点
        for (let keyframe of rule.cssRules) {
          console.log(`关键帧百分比：${keyframe.keyText}，样式：${keyframe.style.cssText}`);
          // 可将值存入变量供后续使用
        }
      }
    }
  } catch (e) {
    // 跨域样式表会报错，直接跳过
    continue;
  }
}

这段代码会逐个检查页面样式表，找到目标关键帧规则后，提取每个百分比对应的样式内容。

二、捕捉元素旋转到特定角度的时机 #

有两种可靠实现方式：

方法1：基于动画时长计算触发时间（适合匀速动画） #

你的动画是linear匀速旋转，总时长50秒转-360度，可直接计算目标角度对应的时间：

• 每旋转1度所需时间：50 / 360 ≈ 0.1389秒
• 旋转到-30度的时间：(30 / 360) * 50 ≈ 4.1667秒

用setTimeout触发动作：

// 动画开始后约4.1667秒触发动作
setTimeout(() => {
  console.log('元素已旋转到-30度，触发动作');
  // 此处编写要执行的代码
}, (30 / 360) * 50 * 1000);

注意：若动画中途被暂停、重置或修改时长，此方法会失效，适合动画全程稳定的场景。

方法2：实时检测元素旋转角度（更精准） #

通过requestAnimationFrame实时获取元素的transform属性，解析出rotateY的角度值，达到目标值时触发动作：

const shape = document.getElementById('shape');
const targetAngle = -30; // 目标角度
let isTriggered = false; // 防止重复触发

function checkRotation() {
  if (isTriggered) return;
  
  // 获取元素的计算样式
  const style = window.getComputedStyle(shape);
  // 获取transform矩阵值
  const transform = style.transform || style.webkitTransform;
  
  // 解析rotateY的角度（针对3D变换的矩阵）
  if (transform.startsWith('matrix3d')) {
    // matrix3d的第9、10位对应rotateY的正弦和余弦值
    const values = transform.match(/matrix3d\(([^)]+)\)/)[1].split(',').map(Number);
    const cos = values[8];
    const sin = values[9];
    // 计算角度，转换为-180到180范围，再调整为0到-360的对应值
    let angle = Math.round(Math.atan2(sin, cos) * (180 / Math.PI));
    if (angle > 0) angle -= 360;
    
    // 判断是否接近目标角度（考虑计算误差，设个小范围）
    if (Math.abs(angle - targetAngle) < 1) {
      isTriggered = true;
      console.log('元素已旋转到-30度，触发动作');
      // 执行你的动作代码
    } else {
      requestAnimationFrame(checkRotation);
    }
  } else {
    requestAnimationFrame(checkRotation);
  }
}

// 开始检测
requestAnimationFrame(checkRotation);

这种方法不管动画是否被修改，都能精准捕捉角度达到目标值的瞬间，推荐用于高精度需求场景。

内容的提问来源于stack exchange，提问作者Саая Айдажы