CSS点击动画异常：鼠标按下仅短时播放，如何实现完整动画？

现有代码 #

CSS（Sass语法） #

.part{
  &:active{
    animation: bounce 0.7s 1 linear;
  }
}

@keyframes bounce {
50% {
  transform: rotate(5deg) translate(20px, -50px);
}
to {
  transform: scale(0.9) rotate(10deg) translate(50px, -280px);
  opacity: 0;
}
}

HTML结构 #

<a href="[$_productLink]" class="" title="Bag">
      <div class="part">
         <i class="fas fa-shopping-bag"></i>
      </div>
 </a>

问题原因 #

:active伪类仅在鼠标按住不放时生效，一旦松开鼠标，元素脱离:active状态，动画会立即终止，无法完整播放。

修复方案 #

方法1：JavaScript控制动画类（推荐） #

通过添加自定义类触发动画，确保动画不受鼠标状态影响，完整播放。

1. 调整CSS，将动画绑定到自定义类：

.part{
  // 移除原:active的动画绑定
}

.part.play-bounce {
  animation: bounce 0.7s 1 linear forwards;
  // forwards属性让动画结束后停在最后一帧
}

@keyframes bounce {
50% {
  transform: rotate(5deg) translate(20px, -50px);
}
to {
  transform: scale(0.9) rotate(10deg) translate(50px, -280px);
  opacity: 0;
}
}

2. 添加JS点击事件，触发动画并处理重复点击：

const partElement = document.querySelector('.part');

partElement.addEventListener('click', function() {
  // 先移除类名，避免连续点击时动画不触发
  this.classList.remove('play-bounce');
  // 强制重绘，确保类名重新添加能触发动画
  void this.offsetWidth;
  this.classList.add('play-bounce');
});

// 可选：动画结束后自动移除类名，方便下次点击
partElement.addEventListener('animationend', function() {
  this.classList.remove('play-bounce');
});

方法2：纯CSS方案（局限性较大） #

通过:focus配合tabindex实现，但存在焦点残留问题：

1. 修改HTML，给.part添加tabindex使其可获取焦点：

<a href="[$_productLink]" class="" title="Bag">
      <div class="part" tabindex="0">
         <i class="fas fa-shopping-bag"></i>
      </div>
 </a>

2. 调整CSS，同时绑定:active和:focus：

.part{
  &:active,
  &:focus{
    animation: bounce 0.7s 1 linear forwards;
    outline: none; // 去除默认焦点边框
  }
}

@keyframes bounce {
50% {
  transform: rotate(5deg) translate(20px, -50px);
}
to {
  transform: scale(0.9) rotate(10deg) translate(50px, -280px);
  opacity: 0;
}
}

注意：此方案下元素会保持焦点状态，再次点击可能无法重新触发动画，且键盘操作也会触发动画，体验不如JS方案。

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