Css 如何反转关键帧一次'；应用

下面是我正在使用的动画和javascript代码，在单击特定按钮时添加相应的类。它很好用

$（文档）.ready（（）=>{
$（'.show'）。在（'单击'，（）=>{
$（'.child'）.addClass（'show'）；
})
$（'.hide'）。在（'单击'，（）=>{
$（'.child'）.addClass（'hide'）；
})
})

.child{
宽度：0；
身高：0；
边框：2倍纯红；
溢出：隐藏；
}
.儿童节目{
动画名称：expandit；
动画持续时间：1s；
宽度：100px；
高度：100px；
}
.藏{
动画名称：hideit；
动画持续时间：1s；
动画方向：反向；
}
@关键帧展开它{
0% {
宽度：0；
}
100% {
宽度：100px；
}
}
@关键帧隐藏{
0% {
宽度：0；
}
100% {
宽度：100px；
}
}

---

您正在查找

动画填充模式

属性，该属性允许您将动画的最终状态保持为应用状态

$（文档）.ready（（）=>{
$（'.show'）。在（'单击'，（）=>{
$（'.child'）.addClass（'show'）；
})
$（'.hide'）。在（'单击'，（）=>{
$（'.child'）.addClass（'hide'）；
})
})

.child{
宽度：0；
身高：0；
边框：2倍纯红；
溢出：隐藏；
}
.儿童节目{
动画名称：expandit；
动画持续时间：1s；
宽度：100px；
高度：100px；
}
.藏{
动画名称：hideit；
动画持续时间：1s；
动画方向：反向；
动画填充模式：正向；
}
@关键帧展开它{
0% {
宽度：0；
}
100% {
宽度：100px；
}
}
@关键帧隐藏{
0% {
宽度：0；
}
100% {
宽度：100px；
}
}