如何让CSS关键帧在div按钮的hover和click状态下均生效？

嘿，我太懂你这种困扰了——hover状态下的波纹动画顺得不行，但点击的时候就是死活不触发，对吧？我之前做按钮交互时也踩过这个坑，主要问题出在CSS :active 伪类的触发特性，以及动画没有被正确重置上。下面给你两个靠谱的解决方案，亲测有效：

方案1：纯CSS优化（伪元素分离状态） #

我们可以把hover和click的波纹效果都放在伪元素上，通过不同的触发逻辑来区分，避免状态冲突：

/* 基础按钮样式 */
.hvr-ripple-out-good {
  position: relative;
  padding: 12px 24px;
  background: #409eff;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}

/* 波纹伪元素（共用基础定位） */
.hvr-ripple-out-good::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Hover状态的波纹（用transition实现平滑扩散） */
.hvr-ripple-out-good:hover::after {
  width: 100%;
  height: 100%;
  padding-bottom: 100%;
  background: rgba(255,255,255,0.2);
  transition: all 0.6s ease;
}

/* Click状态的关键帧动画 */
@keyframes clickRipple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4;
    background: rgba(255,255,255,0.4);
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
  }
}

/* 点击时触发动画 */
.hvr-ripple-out-good:active::after {
  animation: clickRipple 0.7s ease-out forwards;
}

不过这里要注意：如果用户点击后快速松开鼠标，:active 状态会立刻消失，可能导致动画中途中断。如果想要更稳定的效果，建议用下面的JS方案。

方案2：jQuery辅助触发（最稳定） #

通过动态添加/移除类的方式，强制重置动画状态，确保每次点击都能完整执行波纹效果：

CSS部分 #

/* 基础按钮和hover样式和上面一致，新增点击动画类 */
@keyframes clickRipple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4;
    background: rgba(255,255,255,0.4);
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
  }
}

/* 只有添加这个类时才会触发点击波纹 */
.hvr-ripple-out-good.click-trigger::after {
  animation: clickRipple 0.7s ease-out forwards;
}

jQuery部分 #

$('.hvr-ripple-out-good').click(function() {
  const $btn = $(this);
  // 添加动画类触发波纹
  $btn.addClass('click-trigger');
  // 监听动画结束事件，移除类以便下次点击再次触发
  $btn.one('animationend webkitAnimationEnd oAnimationEnd', function() {
    $btn.removeClass('click-trigger');
  });
});

这个方案的核心是：每次点击都通过类的添加让动画重新初始化，动画结束后再移除类，保证下一次点击依然能触发动画，完全规避了:active 状态持续时间短的问题。

额外注意点 #

• 一定要给按钮设置 position: relative，否则伪元素的定位会出错。
• 按钮要加 overflow: hidden，防止波纹超出按钮边界。
• 动画的时长、颜色、扩散范围都可以根据你的需求调整。

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