如何使用jQuery获取外部CSS文件中的CSS关键帧规则？

其实要实现你要的转换，核心是理解怎么通过浏览器的CSSOM（CSS对象模型）来访问关键帧规则，jQuery本身没有专门的API做这个，但可以用它简化遍历操作。我给你拆解下核心思路：

• 第一步：获取样式表集合
  浏览器会把所有加载的样式表（包括你的my.css）存在document.styleSheets里。你可以遍历这个集合，甚至直接遍历所有样式表的规则，不用特意筛选my.css（当然如果有需要，也可以通过样式表的href属性判断是否是目标文件）。

• 第二步：识别关键帧规则
  每个样式表里的规则存在cssRules属性中（旧版WebKit浏览器可能是rules，所以要做兼容：sheet.cssRules || sheet.rules）。遍历这些规则时，要判断是不是关键帧规则：

  • 标准浏览器可以用rule.type === CSSRule.KEYFRAMES_RULE（这个常量值是7）
  • 旧版WebKit（比如老Chrome）则需要判断rule instanceof WebKitCSSKeyframesRule

• 第三步：提取关键帧的名称和步骤
  一旦找到关键帧规则，通过rule.name就能拿到关键帧的名称（比如someName），记得转成小写符合你的需求。然后这个规则里的每一个关键帧步骤，存在它的cssRules（WebKit里是keyRules）集合中：

  • 每个步骤的keyText是百分比字符串（比如0%），转成数字就是你要的键（比如0）
  • 每个步骤的样式存在style属性里，这是一个CSSStyleDeclaration对象，你可以遍历它的属性，用style.getPropertyValue(属性名)拿到样式值，再处理成你要的格式（比如把100px转成数字100）

• 第四步：整理成目标对象结构
  把每个关键帧的名称作为键，对应的步骤对象作为值，逐步组装成你需要的嵌套对象即可。

举个核心逻辑的代码片段（用jQuery简化遍历）：

var result = {};

// 遍历所有样式表
$.each(document.styleSheets, function(_, sheet) {
  var rules = sheet.cssRules || sheet.rules;
  if (!rules) return;

  // 遍历当前样式表的所有规则
  $.each(rules, function(_, rule) {
    // 兼容判断是否为关键帧规则
    var isKeyframe = rule.type === CSSRule.KEYFRAMES_RULE || rule instanceof WebKitCSSKeyframesRule;
    if (!isKeyframe) return;

    var keyframeName = rule.name.toLowerCase();
    var keyframeData = {};

    // 遍历当前关键帧的所有步骤
    $.each(rule.cssRules || rule.keyRules, function(_, keyframeStep) {
      var percent = parseInt(keyframeStep.keyText); // 提取百分比数字
      var styles = {};

      // 遍历当前步骤的所有样式属性
      for (var i = 0; i < keyframeStep.style.length; i++) {
        var prop = keyframeStep.style[i];
        var value = keyframeStep.style.getPropertyValue(prop);
        
        // 处理数值：去掉px转数字，其他数字类型直接转
        value = value.includes('px') ? parseInt(value) : Number(value);
        styles[prop] = value;
      }

      keyframeData[percent] = styles;
    });

    result[keyframeName] = keyframeData;
  });
});

// 最终result就是你要的对象结构
console.log(result);

需要注意的是，浏览器的同源策略可能会限制访问外部样式表的规则，如果my.css是跨域加载的，可能会拿不到规则，这时候要确保样式表和页面同域，或者配置CORS。

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