Css 如何在一次单击中多次更改按钮的背景色？

请看一看我在设备上录制的GIF屏幕，其中有一个按钮示例，该按钮先变为绿色，然后变回原始颜色，然后变为绿色，只需单击一下即可：

我怎样才能做到这一点？我只有这个。然后我不知道下一步要做什么来实现那种动画。请帮忙

.query\u选项{
高度：2em；
保证金：0.3雷姆0.75雷姆；
边界半径：5px；
字号：1em；
边框：1px纯色浅灰色；
颜色：黑色；
}
.query\u选项：悬停{
字体大小：粗体；
边框：2件纯色浅灰色；
颜色：黑色；
}
.query\u选项：活动{
文字装饰：无；
颜色：黑色；
边框：2倍实心rgb（57,235,57）；
背景：绿色；
}

我用javascript创建了一个示例。我写了一个动画并重复了三次

document.querySelectorAll（“.query\u choice”）.forEach（p=>{
p、 addEventListener（“单击”，（）=>{
p、 类列表。添加（“活动”）；
设置超时（（）=>{
p、 类列表。删除（“活动”）；
}, (500 * 3))
//500*3=动画持续时间*动画迭代计数
});
});
.query\u选项{
高度：2em；
保证金：0.3雷姆0.75雷姆；
边界半径：5px；
字号：1em；
边框：1px纯色浅灰色；
颜色：黑色；
}
.query\u choice.active{
动画名称：按钮；
动画持续时间：0.5s；
动画计时功能：线性；
动画迭代次数：3次；
}
.query\u选项：悬停{
字体大小：粗体；
边框：2件纯色浅灰色；
颜色：黑色；
}
.query\u选项：活动{
文字装饰：无；
颜色：黑色；
边框：2倍实心rgb（57,235,57）；
}
@关键帧按钮{
50% {
背景：绿色；
}
}



一个仅限于CSS的解决方案


.query\u选项{
高度：2em；
保证金：0.3雷姆0.75雷姆；
边界半径：5px；
边框：1px纯色浅灰色；
}
.query\u选项：悬停{
边框：2件纯色浅灰色；
}
.query\u选项{
动画：
更改0.3s线性6 alternate，/*使用alternate运行动画6次，得到3个返回*/
h2s；/*这将在页面加载时阻止上述动画（2s>0.3s*6）*/
}
.query\u选项：活动{
边框：2倍实心rgb（57,235,57）；
/*在激活（单击）时，我们更改两个动画中的一个，以便将其更改回原来的状态
松开时，它将被触发*/
动画：
任何东西，/*这里是一个随机的名字*/
h2s；/*我们保留“阻塞”动画，这样它就不会被触发并再次阻塞（是的，这太疯狂了…）*/
}
@关键帧改变{
到{
背景：绿色；
}
}
@关键帧h{
0%，100%{背景：初始；}
}