如何让:active选择器触发的CSS动画至少完整播放一次

问题原因 #

:active 属于临时交互状态，仅在鼠标/手指按住元素时生效，用户松开操作后状态会立即移除，绑定在该状态上的动画自然会随状态消失直接中断，无法自动跑完完整周期。

解决方案 #

方案1：纯CSS实现（无需JS，适合轻量场景）

给按钮添加可聚焦属性，利用:focus状态延长动画触发的有效时长，同时配置动画填充模式保证动画帧不会回退：

1. 给按钮HTML标签添加tabindex="0"属性，让按钮点击后可以保持聚焦状态
2. 修改CSS配置：

.actionButton{
    &:active, &:focus{
        animation: activeButton 2.5s alternate ease-in 1 forwards;
    }
    /* 如果需要聚焦后无限循环，可以把上面的1改成infinite，点击空白处失焦后动画停止 */
}

@keyframes activeButton{
    0% {transform: rotate(0deg);}
    50% {transform: rotate(90deg);}
    100% {transform: rotate(120deg);}
}

方案2：少量JS实现（可控性更高，严格保证至少跑完一次）

通过JS主动控制动画类的添加/移除，不受交互状态变化影响：

1. 调整CSS，把动画绑定到独立的类上：

.actionButton.run-active-animation {
    animation: activeButton 2.5s alternate infinite ease-in;
}

@keyframes activeButton{
    0% {transform: rotate(0deg);}
    50% {transform: rotate(90deg);}
    100% {transform: rotate(120deg);}
}

2. 添加JS逻辑，点击时添加动画类，2.5s动画跑完一个周期后再移除：

const actionBtn = document.querySelector('.actionButton');
actionBtn.addEventListener('click', () => {
  // 重置动画状态，避免重复点击失效
  actionBtn.classList.remove('run-active-animation');
  void actionBtn.offsetWidth; // 触发DOM重绘，让动画重置生效
  actionBtn.classList.add('run-active-animation');
  // 一个动画周期结束后移除类，也可根据需求保留类实现无限播放
  setTimeout(() => {
    actionBtn.classList.remove('run-active-animation');
  }, 2500);
});

如果需要保留原有「按住时无限播放、松开后至少跑完一次」的效果，可以把触发事件换成mousedown添加类，mouseup/touchend时延迟2.5s再移除类即可。

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