如何使用jQuery控制CSS动画的时长（animation-duration）？

当然可以，有两种常用实现方式，你可以根据需求选择：

1. 直接修改元素内联样式（针对单个/部分元素） #

这种方式适合给特定元素动态调整动画时长的场景，比如鼠标悬停时修改、离开时恢复。用jQuery的.css()方法就能直接设置元素的动画时长属性（要兼顾浏览器前缀版本）：

// 给所有.hvr-pulse-grow元素绑定hover事件
$('.hvr-pulse-grow').hover(
  // 鼠标进入时设置新动画时长
  function() {
    $(this).css({
      '-webkit-animation-duration': '0.5s',
      'animation-duration': '0.5s'
    });
  },
  // 鼠标离开时恢复原CSS时长（可选操作）
  function() {
    $(this).css({
      '-webkit-animation-duration': '',
      'animation-duration': ''
    });
  }
);

如果要针对focus或active状态调整，也可以结合.focus()、.blur()、.mousedown()这类对应事件来设置样式。

2. 动态修改全局样式表（批量生效） #

要是想让所有匹配.hvr-pulse-grow:hover/.focus/.active的元素（包括之后动态添加到页面的元素）都用新时长，推荐直接添加全局样式规则：

// 用jQuery创建并插入新样式
$('<style>')
  .text(`
    .hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
      -webkit-animation-duration: 0.5s !important;
      animation-duration: 0.5s !important;
    }
  `)
  .appendTo('head');

这里的!important是为了确保新规则能覆盖原CSS定义——如果原规则优先级和新规则一致，后加载的样式会生效；加!important能进一步提升优先级。

注意事项 #

• 必须同时设置带浏览器前缀的属性（比如-webkit-animation-duration）和标准属性，保证兼容性；
• 如果原CSS规则用了!important，内联样式或新样式规则也得加!important才能覆盖；
• 内联样式优先级高于普通类选择器样式，所以第一种方法会直接覆盖原CSS的动画时长。

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