使用复选框重复css动画

是否可以在没有js的情况下再次运行css animateion

@-webkit-keyframes aaa {
  to {
    background: red;
  }
}
input:checked + div {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: aaa;
  -webkit-animation-duration: 1s;
}
div {
  width: 100px;
  height: 100px;
  background:blue;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: aaa;
  -webkit-animation-duration: 1s;
}

选中复选框后，我想再次运行我的动画

<input type="checkbox" />
<div></div>

---

我一直试图用一个关键帧声明来解决您的问题

如前所述，您可以通过声明两个不同的

关键帧来解决此问题，并将其中一个应用于
：checked
，另一个应用于初始状态

代码片段

@关键帧aaa{
到{
背景：红色；
}
}
@关键帧bbb{
到{
背景：红色；
}
}
输入：选中+div{
动画名称：bbb；
}
div{
宽度：100px；
高度：100px；
背景：蓝色；
动画填充模式：正向；
动画名称：aaa；
动画持续时间：1s；
}

像这样吗？请看一下我的答案。你的问题不同，但要点是一样的。您不能单独使用CSS重新启动动画。@FabrizioCalderan:我认为OP希望动画在加载时运行一次，然后在检查输入时再次运行。如果您（在Chrome上测试过），您可以这样做。根据您的用例，这可能是可取的，也可能不是可取的。然后，当页面加载时以及每次更改复选框时，动画都会运行。