IE9中如何实现类似CSS animate rotate的叶子持续摆动效果？

IE9确实不支持CSS animation 属性，也没有对应的 -ms- 前缀适配，不过既然你已经验证了单独设置 transform: rotate() 在IE9中有效，我们可以用JavaScript（结合jQuery）来模拟这个持续摆动的效果。下面是两种可行的方案：

方案1：递归调用实现循环摆动 #

这种方式和你原CSS动画的逻辑最接近，通过交替设置旋转角度+延迟，再递归调用自身形成无限循环：

function animateLeafSwing() {
  $(".leaf_01")
    // 转到右侧3deg
    .css("transform", "rotate(3deg)")
    // 停留800ms（对应原动画1.6s周期的一半）
    .delay(800)
    // 切换到左侧-3deg
    .queue(function(next) {
      $(this).css("transform", "rotate(-3deg)");
      next();
    })
    .delay(800)
    // 递归调用，重复循环
    .queue(function(next) {
      animateLeafSwing();
      next();
    });
}

// 启动动画
animateLeafSwing();

方案2：使用setInterval定时切换角度 #

如果觉得递归的方式不够直观，也可以用定时器来周期性切换旋转方向：

// 标记当前旋转方向
var isRotatingRight = true;
// 每800ms切换一次角度，总周期和原CSS动画一致
var swingInterval = setInterval(function() {
  var targetAngle = isRotatingRight ? "rotate(-3deg)" : "rotate(3deg)";
  $(".leaf_01").css("transform", targetAngle);
  // 切换方向标记
  isRotatingRight = !isRotatingRight;
}, 800);

// 如果需要停止动画，可以调用：
// clearInterval(swingInterval);

关键注意点 #

• 确保你使用的jQuery版本兼容IE9（推荐jQuery 1.12.x系列，2.x及以上版本不再支持IE9）。
• 保留原CSS中的 transform-origin: center -20px，这个属性在IE9中是支持的，它决定了叶子摆动的支点，是动画效果正确的核心。
• 两种方案的延迟时间（800ms）对应原CSS动画的1.6s周期，你可以根据需求调整这个数值来改变摆动速度。

这样就能在IE9中实现和原CSS动画几乎一致的叶子摆动效果了。

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