Javascript 如何使css动画按需向前或向后播放

我有一个css动画，根据某些情况，我希望能够在任何时候根据一些JS向前或向后切换。以下是一个基本示例：

html

css

小提琴：

---

我认为这将是非常直接的，但令人惊讶的是，我没有找到一个方法来完成这一点。请注意，我专门寻找一个带有动画的解决方案，而不是过渡。有什么想法吗？

您可以使用两个类来制作所需的动画

window.isSmall=true；
window.toggle=（）=>{
const-box=document.getElementById（“box”）；
如果（isSmall）{
box.classList.remove（“较小”）；
box.classList.add（“更大”）；
}否则{
box.classList.remove（“更大”）；
box.classList.add（“较小”）；
}
isSmall=！isSmall；
控制台日志（isSmall）
}

@关键帧更大{
从{
宽度：100px；
高度：100px；
}
到{
宽度：200px；
高度：200px；
}
}
@关键帧更小{
从{
宽度：200px；
高度：200px；
}
到{
宽度：100px；
高度：100px；
}
}
#盒子{
宽度：100px；
高度：100px；
背景色：红色；
}
.更大{
动画名称：更大；
动画持续时间：1s；
动画填充模式：正向；
}
.小一点{
动画名称：较小；
动画持续时间：1s；
动画填充模式：正向；
}

切换

我刚刚弄明白了这一点。因此，我的解决方案如下：

<div id="box"></div>

<button onclick="toggle()">toggle</button>

window.isSmall = true;
window.toggle = function() {
    var el = document.getElementById("box");
    if (el.className == "a") {
    el.className = "b";
    } else {
    el.className = "a";
  }
  isSmall = !isSmall;
  console.log('toggle');
 }


@keyframes a {
    from { width:100px; height:100px; }
    to { width:200px; height:200px; }
}
@keyframes b {
    from { width:200px; height:200px; }
    to { width:100px; height:100px; }
}

#box {
    width:100px;
    height:100px;
    background-color: red;
}

.a {
    animation-name: a;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.b {
  animation-name: b;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

切换
window.isSmall=true；
window.toggle=函数（）{
var el=document.getElementById（“框”）；
如果（el.className==“a”）{
el.className=“b”；
}否则{
el.className=“a”；
}
isSmall=！isSmall；
log（'toggle'）；
}
@关键帧{
从{宽度：100px；高度：100px；}
到{宽度：200px；高度：200px；}
}
@关键帧b{
从{宽度：200px；高度：200px；}
至{宽度：100px；高度：100px；}
}
#盒子{
宽度：100px；
高度：100px；
背景色：红色；
}
.a{
动画名称：a；
动画持续时间：1s；
动画填充模式：正向；
}
.b{
动画名称：b；
动画持续时间：1s；
动画填充模式：正向；
}

我把“大”改为“a”，把“小”改为“b”。但这是可行的。好的，我现在有一把小提琴

此外，关于StackOverflow的问题在某种程度上回答了这个问题：

---

可能是2个动画？当你需要螺丝刀时，为什么要用锤子呢？嗯，这很有趣，我以为我已经试过了，但我一定是一路上碰到了什么东西，错过了。太好了，谢谢！

window.isSmall = true;
window.toggle = function() {
    if (isSmall) {
    var el = document.getElementById("box");
    el.classList.add("bigger");
  } else {
    // ????
  }
  isSmall = !isSmall;
}

@keyframes bigger {
    from { width:100px; height:100px; }
    to { width:200px; height:200px; }
}

#box {
    width:100px;
    height:100px;
    background-color: red;
}

.bigger {
    animation-name: bigger;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

<div id="box"></div>

<button onclick="toggle()">toggle</button>

window.isSmall = true;
window.toggle = function() {
    var el = document.getElementById("box");
    if (el.className == "a") {
    el.className = "b";
    } else {
    el.className = "a";
  }
  isSmall = !isSmall;
  console.log('toggle');
 }


@keyframes a {
    from { width:100px; height:100px; }
    to { width:200px; height:200px; }
}
@keyframes b {
    from { width:200px; height:200px; }
    to { width:100px; height:100px; }
}

#box {
    width:100px;
    height:100px;
    background-color: red;
}

.a {
    animation-name: a;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.b {
  animation-name: b;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}