CSS:active触发的::after动画松手后中断，如何让动画完整结束？

问题核心在于你使用:active伪类触发动画——松开鼠标按键时，:active状态会立即消失，伪元素也随之被移除，导致动画中途被打断。要让动画完整执行，需要通过JavaScript添加临时类来控制动画周期，等动画结束后再移除类即可。

具体修改步骤： #

1. 调整CSS结构

   • 给按钮（span元素）添加position: relative，确保伪元素的绝对定位以按钮为基准
   • 将原来:active::after的样式替换为自定义类（比如.copied::after），并设置animation: copied 1s forwards，让动画结束后保持最终状态，直到类被移除

2. 补充JavaScript逻辑

   • 实现IP复制功能（补全你未定义的onclicker函数）
   • 点击按钮时给元素添加copied类触发动画
   • 监听动画结束事件，自动移除copied类，让按钮恢复初始状态

修改后的完整代码： #

CSS

* {
    font-family: monospace;
}
table{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 2px dashed black;
}
td, th{
    padding: 5px;
    border: 2px dashed black;
    text-align: center;
}
tr td:nth-child(4) span {
    cursor: pointer;
    background: #95c1e3;
    color: white;
    padding: 12px;
    border-radius: 50px;
    font-weight: bolder;
    font-size: 17px;
    position: relative; /* 新增：伪元素定位基准 */
}
/* 用自定义类替代:active触发动画 */
tr td:nth-child(4) span.copied::after {
    display: block;
    position: absolute;
    width: 100px;
    height: max-content;
    padding: 10px 0;
    background: black;
    border-radius: 50px;
    animation: copied 1s forwards; /* forwards：保持动画结束状态 */
    content: "copiado!";
    opacity: 0;
    left: 50%;
    transform: translateX(-50%); /* 新增：提示文字居中 */
}
@keyframes copied {
    0%{
        margin-top: 0;
        opacity: 1;
    }
    100%{
        margin-top: 15px;
        opacity: 0;
    }
}

HTML（包含脚本）

<table>
   <thead>
      <tr>
         <th>Server</th>
         <th>Nombre</th>
         <th>Jugadores</th>
         <th>IP</th>
      </tr>
   </thead>
   <tbody id="tabla">
      <tr>
         <td></td>
         <td>Sin nombre</td>
         <td>1399 / 5000</td>
         <td><span onclick="onclicker(this)">hub.mc-complex.com</span></td>
      </tr>
      <tr>
         <td></td>
         <td>      ! SuperCraft Network [1.8-1.21] ❤ !
            Amigos en: discord.supercraft.es
         </td>
         <td>333 / 2000</td>
         <td><span onclick="onclicker(this)">supercraft.es</span></td>
      </tr>
      <tr>
         <td></td>
         <td>   1.8-1.21
            NUEVO &gt; 15 REGALOS DE NAVIDAD
         </td>
         <td>189 / 1000</td>
         <td><span onclick="onclicker(this)">play.zonecraft.es</span></td>
      </tr>
      <tr>
         <td></td>
         <td>      ! UniversoCraft Network [1.8-1.21] ❤ !
            Chatea en: discord.universocraft.com
         </td>
         <td>5427 / 20000</td>
         <td><span onclick="onclicker(this)">mc.universocraft.com</span></td>
      </tr>
   </tbody>
</table>

<script>
function onclicker(el) {
    // 复制当前按钮的IP文本到剪贴板
    navigator.clipboard.writeText(el.textContent).then(() => {
        // 添加类触发动画
        el.classList.add('copied');
        
        // 监听动画结束事件，完成后移除类
        el.addEventListener('animationend', function removeClass() {
            el.classList.remove('copied');
            el.removeEventListener('animationend', removeClass); // 清理监听避免重复触发
        });
    });
}
</script>

关键说明： #

• 用自定义类替代:active，确保动画触发后不会因鼠标松开而立即终止
• animation: copied 1s forwards让动画结束后保持最后一帧状态，直到类被移除
• 通过animationend事件自动清理类，避免按钮长期保留伪元素样式

内容的提问来源于stack exchange，提问作者Jesús Fernández