Javascript 如何从JS触发CSS动画？

我有一个气球，当悬停时，它将展开并消失（一个弹出式动画）。我是用CSS做的，但是当光标移动时，气球返回。我希望气球永远消失，直到我刷新页面，所以我想它需要onclick，但该选择器在CSS中不可用

以下是我在CSS中的内容

@keyframes pop
{
    from{
        opacity:1;
        transform: translateZ(0) scale(1,1);
    }

    to{
        opacity:0;
        transform: translateZ(0) scale(1.5,1.5);
    }
}

.balloon:hover
{
    animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}

我看到另一个问题，说最接近的事情是：主动，但它需要按住鼠标。如果我希望它是onclick，我需要使用Javascript。但是我不知道我需要写什么来触发动画

---

是否也可以这样做，当我弹出1个气球时，所有其他气球都会自动弹出，中间有1秒的延迟？（有5个气球）。

您可以使用

classList

添加和删除带有JS的动画类

加：

删除：

object.classList.remove('balloon');

工作示例：

const add=（）=>{
document.getElementById（'balloon'）.classList.add（'animation'））
}
常量删除=（）=>{
document.getElementById（'balloon'）.classList.remove（'animation'））
}

@关键帧弹出{
从{
不透明度：1；
变换：translateZ（0）比例（1,1）；
}
到{
不透明度：0；
变换：translateZ（0）比例（1.5,1.5）；
}
}
.动画{
动画：向前弹出0.5s立方贝塞尔（0.16,0.87,0.48,0.99）；
}
.气球{
高度：125px；
宽度：110px；
背景色：#FF6B；
边界半径：50%；
}
.控制{
位置：绝对位置；
底部：10px；
右：10px；
}

隐藏
显示

这里有一个解决方案，使气球一个接一个地隐藏起来，间隔为0.5秒

var ballobs=document.getElementsByClassName（'balloon'）；
[…气球].forEach（（e，i）=>{
e、 onmouseover=函数（）{
this.classList.add（'hidden'）；
setTimeout（hideAll，500，气球）；
}
});
函数hideAll（arg）{
[…arg].forEach（（e，i）=>{
如果（！e.classList.contains（'hidden'））{
e、 style.animationDelay=i+'s'；
e、 添加（'hidden'）；
}
});
}

@关键帧弹出
{
从{
不透明度：1；
变换：translateZ（0）标度（1,1）；
}
到{
不透明度：0；
变换：translateZ（0）标度（1.5,1.5）；
}
}
.气球.隐藏
{
动画：pop.5s立方贝塞尔（0.16,0.87,0.48,0.99）向前；
}

气球
气球
气球
气球
气球

这是否回答了您的问题？

object.classList.remove('balloon');